mojwp.ru
Назад

Хаки WordPress - красивый текстовый блок.

Опубликовано: 13.03.2012
38
1518

Хотите, чтобы Ваш сайт стал чуточку лучше и статьи получили красивое оформление? Тогда эта заметка для Вас. Мы создадим собственный шорткод (проще говоря – шаблон чего-то), который отобразит в статье красивый текстовый блок. После этого настроим его под дизайн сайта, выполняя все пункты по предложенной инструкции. В результате этих действий мы получим уникальное оформление сайта и не будем нагружать хостинг еще одним плагином. Пример работы смотрите внутри данной статьи.

Как и обещал, вот пример одного из текстовых блоков, которые я сделал сам и пользуюсь по мере необходимости.

[infob name="Пример шорткода на mojWP.ru"]Вот так можно оформить блок с текстом. Если будете читать далее, то сможете сделать это сами. Притом цвет, картинка, шрифт и его размер, можно задать индивидуально для каждого шаблона блока[/infob]

Чтобы данный блок отобразился в нужном мне месте, я поместил текст внутри шорткода и выглядит это все так:

[info name="Пример шорткода на mojWP.ru"]
Вот так можно оформить блок с текстом. Если будете читать далее, то сможете сделать это сами. Притом цвет, картинка, шрифт и его размер, можно задать индивидуально для каждого шаблона блока
[/info]

Согласитесь - все просто и не создает дополнительных трудностей.

Те же из Вас, кто не любит что-либо настраивать и делать своими руками, могут воспользоваться ссылкой в конце статьи на плагин, который делает аналогичное.

Чтобы сделать текстовый блок своими руками и уникальным дизайном, нам понадобится:

  1. текстовый редактор (я рекомендуемую Notepad++);
  2. файл functions.php (находится в папке с шаблоном Вашего блога на ftp);
  3. файл стилей шаблона (обычно style.css, который лежит так же в папке с шаблоном на ftp);
  4. руки, голова и пятая точка на стуле;
  5. воображение.

Список всего необходимого не такой уж большой, поэтому найдете все без труда. Приступаем.

Шаг №1: создаем каркас текстового блока

Чтобы создать каркас (скелет) нам понадобится файл functions.php, который располагается в папке с шаблоном Вашего сайта на ftp. Сделайте его резервную копию на всякий случай, если что-то пойдет не так.

Открываем этот файл текстовым редактором и вставляем представленный код в самый конец файла, перед закрывающим ?> (после него писать ничего нельзя):

// старт текстового блока info
function info_box($atts, $content) {
     if (!isset($atts[name])) {
			$sp_name = 'Внимание';
		} else {
			$sp_name = $atts[name];
		}
     return '
'.$sp_name.'
'.$content.'
'; } add_shortcode('info', 'info_box'); // конец текстового блока info

Сохранили изменения и закачали на ftp назад с подменой старого файла, т.к. он уже не актуален. После этого обновите свой сайт в браузере и убедитесь что он работает. Если все нормально, значит Вы вставили код в нужно место и не нарушили целостность системы. Если же есть какие то проблемы, то внимательно проверьте место вставки кода и повторите все сначала.

Теперь поясню, что Вы здесь можете менять, чтобы в будущем смогли сделать несколько заготовок под разные шаблоны оформления.
[spoiler name="Расшифровка написанного"]

  • info_box - это название функции, которое стоит в двух местах (в самом начале и конце кода). Оно может быть произвольным, но делайте понятным для себя. Обязательно на латинице. Допустим, Вы будете делать блок для скачивания чего либо, тогда можно заменить info_box на download-box, либо еще как назвать.
  • $sp_name = 'Важная информация' - данная конструкция отвечает за текст заголовка формы, который выводится по умолчанию, если Вы ему не назначили другое имя. В моем примере текстового блока в самом начале статьи так же стоит такой текст по умолчанию, но, благодаря коду $sp_name=$atts[name];, у меня есть возможность в каждом конкретном случае называть блок любым именем, как я и сделал выше: "Пример шорткода на mojWP.ru". Как назначать произвольное имя я расскажу ниже, а теперь Вы можете заменить фразу, выводимую по умолчанию на произвольную.
  • div class=''infobox'' - здесь Вы можете менять слово infobox на произвольное. Опять же, старайтесь делать запоминающееся, чтобы не запутаться в будущем. Данная конструкция позволит нам в последующем оформить внешний вид текстового блока (рамка, цвет, картинка, выравнивание и размеры).
  • div class=''infobox-title'' - здесь так же можно менять название класса infobox-title. В данном случае он будет отвечать за оформление заголовка "Пример шорткода на mojWP.ru" (размер, шрифт, цвет, отступ и прочее).
  • div class=''infobox-content'' - как и в предыдущих двух пунктах меняем на усмотрение название класса. Отвечает данная конструкция за оформление основного контента.
  • add_shortcode('info', 'info_box') - здесь нам важно слово info, которое стоит сразу же после открывающей скобки. Именно оно будет вызывать всю конструкцию в нужном нам месте. А сама эта строчка регистрирует наш шорткод в системе

[/spoiler]

На этом с разбором каркаса закончили. Теперь Вы знаете что можно менять, чтобы сделать несколько заготовок. Переходим к следующему шагу - оформлению.

Шаг №2: оформление дизайна текстового блока

Чтобы все оформить красиво, нам понадобится файл стилей Вашего шаблона, который лежит в папке этого самого шаблона и имеет расширение .css. Обычно его так и называют style.css. Делаем его резервную копию на всякий случай и открываем в текстовом редакторе. Далее идем вниз до самого конца и в новую строку вставляем следующий код:

/* оформляем внешний каркас */
.infobox {
 background: #E2F8DE url(images/info.png) no-repeat;
 border: 1px solid #0975B5;
 padding: 3px 5px 3px 30px;
 margin: 10px;
 text-align: justify;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 -khtml-border-radius: 5px;
 border-radius: 5px;
}
/* оформляем заголовок формы */
.infobox-head {
 font-size:24px;
 color:#0D7BB8;
 margin: 0 0 5px 0;
}
/* оформляем основной контент */
.infobox-content {
 line-height: 1.3em;
}

Как видите, здесь представлены три блока, которые мы будем оформлять. Именно такие названия указаны в коде из Шаг №1. Поэтому, если что-то меняете там в названии классов, то меняете и в этом коде, чтобы все работало правильно.

[spoiler name="Поясняю, что здесь можем менять"]

  • background: #E2F8DE url(images/info.png) no-repeat; - задаем фон для всего каркаса: #E2F8DE отвечает за цвет фона; url(images/info.png) отображает картинку, которая у меня представлена в виде лампочки и лежит в папке /images/ с шаблоном, о чем говорит путь images/info.png; no-repeat говорит о том, что лампочка не будет дублироваться и заполнять собой все пространство, а тихонечко постоит в углу. В случае чего можете скопировать мою лампочку и закинуть к себе в шаблон.
  • border: 1px solid #0975B5; - отвечает за рамку (бордюр) вокруг формы: 1px - это толщина в пикселях (можете менять по своему усмотрению); solid говорит о том, что рамка будет непрерывной; #0975B5 - это цвет, как и в случае с background мы задаем необходимый нам.
  • padding: 3px 5px 3px 30px; - внутренний отступ контента и текста. Здесь цифры в пикселях соответственно обозначают отступ: сверху справа снизу слева. Данная штука позволяет не сливаться тексту с рамкой и сохранять дистанцию. Вы так же сами подстраиваете данный параметр под себя.
  • margin: 10px; - это уже внешний отступ. Он обозначает, что вокруг формы ничто не будет ближе, чем 10px, т.е. ничто не "наедет" на выводимый текстовый блок. Хоть здесь стоит один параметр 10px, но он работает так же как и у предыдущего padding. Если у Вас везде одинаковая цифра, то можно ее указать один раз, вместо четырех повторений (сверху справа снизу слева). Поэкспериментируйте.
  • text-align: justify; - а вот это позволяет выравнивать текст по всей ширине поля, т.е. не будет "ступеней" строк справа. Если Вам это не нужно, то можете удалить строку.
  • -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; - это все вместе отвечает за скругление углов текстового блока. Спрашиваете, почему так много? Ответ очень простой: у нас много браузеров, с которых могут зайти на сайт (FireFox, Chrome, Opera, InternetExplorer, Safari и прочие) и все они имеют разный код обработки. Именно поэтому приходится учитывать эти особенности и добавлять дополнительные строки. Если меняете цифру в одном месте, то необходимо сменить везде, чтобы отображалось одинаково для всех.

[/spoiler]

Следующий блок infobox-head позволяет настроить оформление заголовка.
[spoiler name="Поясняю"]

  • font-size:24px; - размер шрифта в пикселях. Подбирайте под себя, пока не достигните желаемого результата.
  • color:#0D7BB8; - цвет шрифта. Сейчас он синего цвета, но меняйте на тот, который будет гармонично смотреться у Вас на сайте.
  • margin: 0 0 5px 0; - об этом говорили выше. Здесь он позволяет сделать снизу отступ от основной части текста.

[/spoiler]

И последний блок infobox-content, который отвечает за внешний вид основного текста (контента). Его можно было вообще не оформлять, а оставить таким, как он выводится по умолчанию на Вашем сайте. Однако следует учитывать, что кто-то может сделать задний фон текстового блока отличного цвета от стандартного по всему сайту, ввиду чего шрифт станет нечитабельным. В этом случае мы всегда можем назначить ему свой цвет:

  • line-height: 1.3em; - междустрочный интервал, на случай, если по умолчанию слишком большой или маленький.

В этом же пункте можно применять все параметры, которые описывались чуть выше (цвет, отступ, выравнивание и прочее).

Все на этом. Сохранили файл на ftp и пробуем вывести текстовый блок, который только что создали.

Шаг №3: выводим текстовый блок в статье

Чтобы поместить необходимый текст в блок, нам необходимо воспользоваться созданным на первом шаге шорткодом и выглядель будет вот так:

[info]произвольный текст[/info]

В этом случае отобразится наш блок со стандартным заголовком "Важная информация" (смотреть Шаг №1). Но мы можем выводить свой заголовок, который будет более уместен в каждой конкретной ситуации. Добавляем параметр name в шорткод:

[info name="Заголовок"]произвольный текст[/info]

Поздравляю Вас! Вы сделали все сами и теперь можете использовать шаблоны текстовых блоков в статьях. Главное не переборщите, чтобы статья не превратилась в сплошные разноцветные формы.

Шаг №4: послесловие

Здесь хотелось бы дать Вам небольшую подсказку, как можно быстро узнать цвет необходимого Вам элемента на сайте или компьютере и получить его код в формате #333444. В этом нам поможет программа FastStone Capture, у которой есть "Пипетка". Разберитесь и она облегчит Вам работу в качестве блогера и вебмастера.

А теперь ссылка на плагин, который выводит аналогичные блоки Special Text Boxes.

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Алексей
    Опубликовано: 03.04.2012 Ответить на сообщение

    Спасибо за мануал, долго скал как выделять текст

  • antonio
    Опубликовано: 04.06.2012 Ответить на сообщение

    а как убрать из этого блока заголовок? просто выделить нужный кусок текста без заголовка к нему.

    • Виталий
      Опубликовано: 07.06.2012 Ответить на сообщение

      либо убрать в первом шаге код, отвечающий за вывод заголовка, либо поставить вместо "Внимание" пробел и потом не указывать свой name внутри шорткода

  • Nurlan
    Опубликовано: 07.06.2012 Ответить на сообщение

    Здравствуйте. У меня не получилось. Сделал все как написано, но после вставки [info]текст [/info] этот отрезок совсем исчезает и его не видно в статье.

    • Виталий
      Опубликовано: 07.06.2012 Ответить на сообщение

      Плохо, что не получилось, т.к. видел сайты, где все работает.

      Еще раз пройдитесь по всем пунктам. Может где-то забыли что-то вставить или настроить.

  • antonio
    Опубликовано: 14.06.2012 Ответить на сообщение

    Виталий, один такой блок я создал, всё работает, спасибо. Теперь мне нужно создать второй точно такой же блок но с другой расцветкой.
    не могу разобраться какие названия мне нужно поменять для того чтобы сделать ещё один блок.

  • antonio
    Опубликовано: 14.06.2012 Ответить на сообщение

    а хотя всё, разобрался сам. поменял info на info1, info_box на info_box1 и класс с box на box1. вроде работает. надеюсь всё сделал правильно.

  • Женя
    Опубликовано: 14.06.2012 Ответить на сообщение

    Вау!!!То, что искал! Думал раньше ставить плагин или нет из-за нагрузки на хостинг. А теперь сам все сделаю. Завтра же попробую! Статья попала в закладки:)

  • Nurlan
    Опубликовано: 11.07.2012 Ответить на сообщение

    Здравствуйте, Виталий. Спустя месяц снова попытался сделать текстовый блок. И у меня получилось! Причина неудачной попытки была кодировка utf8. Спасибо Вам за статью.

    • Виталий
      Опубликовано: 11.07.2012 Ответить на сообщение

      ну вот и славненько)

  • Никита
    Опубликовано: 09.10.2012 Ответить на сообщение

    Виталий, спасибо за хорошую статью. Применил опубликованный код, только немного по - другому, обрезал все функции, и просто вставил вывод блока в single.php Теперь в каждой статье, внизу страницы появляется симпатичный P.S. Еще раз спасибо.

  • Olenkac
    Опубликовано: 28.11.2012 Ответить на сообщение

    Спасибо за чёткое, толковое и доступное объяснение!
    буду теперь почаще заглядывать в гости)))
    Успехов вам!

  • Герман
    Опубликовано: 04.12.2012 Ответить на сообщение

    Здравствуйте, Виталий. А можно в тексте блока давать ссылку на страницу или статью?

    • Виталий
      Опубликовано: 04.12.2012 Ответить на сообщение

      конечно.

      • Герман
        Опубликовано: 04.12.2012 Ответить на сообщение

        О, спасибо! Буду пробовать- это то что искал.

  • Герман
    Опубликовано: 11.12.2012 Ответить на сообщение

    Виталий, у меня почему-то не работают стили. Блок выводится как обычный текст. Вставил куда сказано, редактировал в notepad++, в общем всю голову себе сломал... Что бы это могло быть..?

    • Виталий
      Опубликовано: 11.12.2012 Ответить на сообщение

      основываясь на данных, которые вы предоставили, ответить точно не могу.
      проверяйте все шаги. видел на нескольких других блогах мой текстовый блок. значит все работает.
      почитайте предыдущие комментарии

  • Александр
    Опубликовано: 25.02.2013 Ответить на сообщение

    Виталий, только-что оставил вопрос в коменнтах к такому-же плагину, но возможно полезно будет и здесь, итак:
    "Возможно-ли вывести Ваши замечательные блоки на страницах анонсов статей, т.е. в рубриках, тегах, на главной?"

    • Виталий
      Опубликовано: 25.02.2013 Ответить на сообщение

      там ответил.
      Можете выводить где угодно: либо напрямую в файлы шаблона рубрик, меток и т.п., либо используйте плагины, которые позволяют отображать информацию на данных страницах.

      • Александр
        Опубликовано: 25.02.2013 Ответить на сообщение

        "используйте плагины, которые позволяют отображать информацию на данных страницах." Например? Если можно...
        WhyDoWork AdSense в WordPress 3.5.1 не работает для рубрик.

  • Андрей
    Опубликовано: 19.03.2013 Ответить на сообщение

    Отличная статья все расписано от А до Я, можно даже сказать, что разжалованная. Завтра начну работать.
    Благодарность 😉 автору

  • Татьяна
    Опубликовано: 04.10.2013 Ответить на сообщение

    Здравствуйте!
    А у меня не получается, так как файл style.css настроен таким образом, что блокирует все изменения. Не могу найти эту блокировку. Вставила ваши коды, а получилось просто вставка слов. Стили не сработали. Примерно так:
    Внимание
    проверка
    Как быть? Надеюсь на вашу помощь)

  • Татьяна
    Опубликовано: 04.10.2013 Ответить на сообщение

    Получилось))) Огромное спасибо! Надеюсь теперь избавиться от Special Text Boxes, который грузит блог. Подписываюсь на ваши статьи)

  • Алексей
    Опубликовано: 17.11.2013 Ответить на сообщение

    Виталий,Здравствуйте!
    Такой блок для вывода анонсов интересный. Но у меня возникла проблема:
    При заполнении блока текст выходит за рамки блока.Подскажите, как это можно исправить?

    • Виталий
      Опубликовано: 17.11.2013 Ответить на сообщение

      Подскажу. Но нужно видеть. Сделайте где у себя на сайте и дайте ссылку.

      • Алексей
        Опубликовано: 17.11.2013 Ответить на сообщение

        Виталий,спасибо за быстрый отклик!
        Просто я взял и переделал всё снова.Может где и раньше допустил ошибку.Но теперь всё работает нормально!Интересуюсь:Можно ли задать другой цвет для не посещённой ссылки?
        Ещё раз благодарю за оперативность!
        Алексей.

        • Виталий
          Опубликовано: 17.11.2013 Ответить на сообщение

          http://www.moneycubed.ru/wp-content/themes/finance-security/style.css
          строка 1116
          меняйте параметр color

          • Алексей
            Опубликовано: 17.11.2013 Ответить на сообщение

            Спасибо за информацию.Всё понятно.

  • Надежда
    Опубликовано: 17.11.2015 Ответить на сообщение

    Здравствуйте, можно ли во внутрь как то вставить картинку?

  • Игорь
    Опубликовано: 29.12.2015 Ответить на сообщение

    Здравствуйте, с наступающим. Скажите, есть ли возможность сделать текстовый блок не на всю страницу, а скажем в соотношении 30 на 60 ли 40 на 60 ? Было бы здорово...

  • Алексей
    Опубликовано: 21.07.2016 Ответить на сообщение

    Спасибо, Виталий!
    Отличная статья, полезнейший блог!

    Сделал себе рамки, настроил свои стили и наслаждаюсь результатом. Искал именно такой вариант с прописыванием кода в function.php, чтобы заголовок рамки шёл из кода. Везде предлагают вариант только со стилями css.

    Ваш вариант рамки идеальный.

  • Алексей
    Опубликовано: 26.07.2016 Ответить на сообщение

    Виталий!
    Подскажите, пожалуйста, как прилипить рамку к правой части страницы? Но при этом, чтобы в стилях был задан параметр - display: inline-block для всего каркаса.
    Я уже всё перепробовал, добавляю инлайн блок и вся рамка уезжает влево.

    Спасибо.

    • Виталий
      Опубликовано: 26.07.2016 Ответить на сообщение

      Пример покажите

      • Алексей
        Опубликовано: 26.07.2016 Ответить на сообщение

        Вот статья на тестовом блоге, где провожу испытания - http://test.nafotobloge.ru/tehnicheskaya-chast/sadovye-cvety-sedobnye-bez-plyonochek.html
        Первая рамка с ссылкой. Её нужно прилепить справа, но когда я добавляю инлайн блок, она уезжает влево. Уже всё перепробовал, никак не могу осилить.

        • Виталий
          Опубликовано: 28.07.2016 Ответить на сообщение

          http://stackoverflow.com/questions/10272605/align-two-inline-blocks-left-and-right-on-same-line

          • Алексей
            Опубликовано: 28.07.2016 Ответить на сообщение

            Спасибо. Я очень старался понять, честно, но не смог. Для меня коды, пока-что, как программа старшеклассника для первоклассника.

  • Алексей
    Опубликовано: 11.01.2017 Ответить на сообщение

    Здравствуйте, Виталий!

    А как с помощью шорткода сделать кнопку для скачивания, закрытую тегом "nofollow", как на этой странице сайта? https://photoshop-master.ru/adds/brushes/23531-kisti-dlya-fotoshopa-figuryi-abstraktsiya.html То есть, в статье создавать надпись со ссылкой, и потом оборачивать её шорткодами.

    Очень надо, готов заказать как платную услугу. Помогите, пожалуйста.

  • Максим Л
    Опубликовано: 03.10.2018 Ответить на сообщение

    В очередной раз нахожу у Вас на сайте необходимую и понятную информацию - большое спасибо за материал! Установил у себя на сайте Ваш шорткод и оформил своими стилями - все получилось!

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.