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

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

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

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

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

[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 '<div class="infobox">
	 <div class="infobox-head">'.$sp_name.'</div>
	 <div class="infobox-content">'.$content.'</div></div>';
}
add_shortcode('info', 'info_box');
// конец текстового блока info

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

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

Расшифровка написанного

  • 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, которое стоит сразу же после открывающей скобки. Именно оно будет вызывать всю конструкцию в нужном нам месте. А сама эта строчка регистрирует наш шорткод в системе

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

Шаг №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. Поэтому, если что-то меняете там в названии классов, то меняете и в этом коде, чтобы все работало правильно.

Поясняю, что здесь можем менять

  • 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 и прочие) и все они имеют разный код обработки. Именно поэтому приходится учитывать эти особенности и добавлять дополнительные строки. Если меняете цифру в одном месте, то необходимо сменить везде, чтобы отображалось одинаково для всех.

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

Поясняю

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 37 комментариев
  1. Алексей (1 комм.) says:
    http://vsegadgeti.ru/

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

  2. antonio (16 комм.) says:
    http://aqwas.ru/

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

    • Виталий (1691 комм.) says:

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

  3. Nurlan (3 комм.) says:
    http://maks-1.com/

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

    • Виталий (1691 комм.) says:

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

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

  4. antonio (16 комм.) says:

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

  5. antonio (16 комм.) says:

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

  6. Женя (58 комм.) says:
    http://tut-blog.ru

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

  7. Nurlan (3 комм.) says:
    http://maks-1.com/

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

    • Виталий (1691 комм.) says:

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

  8. Никита (1 комм.) says:
    http://mamochkavdekrete.ru

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

  9. Olenkac (1 комм.) says:
    http://palubovnica.ru/

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

  10. Герман (3 комм.) says:

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

    • Виталий (1691 комм.) says:

      конечно.

      • Герман (3 комм.) says:

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

  11. Герман (3 комм.) says:

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

    • Виталий (1691 комм.) says:

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

  12. Александр (11 комм.) says:
    http://www.maslovavto.ru/

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

    • Виталий (1691 комм.) says:

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

      • Александр (11 комм.) says:
        http://www.maslovavto.ru/

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

  13. Андрей (130 комм.) says:
    http://zarobitok.ru/

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

  14. Татьяна (8 комм.) says:
    http://englishstory.ru

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

  15. Татьяна (8 комм.) says:
    http://englishstory.ru

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

  16. Алексей (3 комм.) says:
    http://www.moneycubed.ru/

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

    • Виталий (1691 комм.) says:
      http://mojWP.ru/

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

      • Алексей (3 комм.) says:
        http://www.moneycubed.ru/

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

        • Виталий (1691 комм.) says:
          http://mojWP.ru/

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

          • Алексей (3 комм.) says:
            http://www.moneycubed.ru/

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

  17. Надежда (18 комм.) says:
    http://vkpluss.ru/

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

  18. Игорь (1 комм.) says:

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

  19. Алексей (7 комм.) says:

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

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

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

  20. Алексей (7 комм.) says:

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

    Спасибо.

    • Виталий (1691 комм.) says:
      http://mojWP.ru/

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

      • Алексей (7 комм.) says:

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

        • Виталий (1691 комм.) says:
          http://mojWP.ru/

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

          • Алексей (7 комм.) says:
            http://nafotobloge.ru/blog

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

  21. Алексей (7 комм.) says:
    http://nafotobloge.ru/

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

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

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.24MB | MySQL:107 | 0,348sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT https://wp-r.ru/plaginy/elt.html