Как красиво оформить текст в WordPress без плагина

Как красиво оформить текст без плагина

Приветствую Вас на своем блоге!
В WordPress можно красиво оформить текст с помощью плагина  WP-Note или Special Text Boxes, а можно и без плагина. Как известно чем меньше плагинов установлено, тем лучше. А может кто-то вообще не любит плагины и старается все делать без них. Самый простой способ красиво оформить текст без плагина, это с помощью таблицы стилей style.css вашей темы.
Для начала нужно написать свойства стиля, как мы будем оформлять текст. Это можно сделать в текстовом редакторе notepad++ или juffed. Так сказать сделать заранее несколько заготовок, а потом их просто подставлять в нужное место

Вот пример такого кода:

Как видите наш код состоит из трех блоков – это блок общей рамки, блок заголовка и отдельно идет блок содержимого рамки.

Немного поясню, что в этом коде за что отвечает:

1 блок.

.bloginfo   – название div класса. Тут можно написать любое название, главное чтобы оно совпадало и в css и в блоге;
background: #eee url(images/img.png) no-repeat;  –  фон нашей рамки с картинкой в углу рамки, если нужна. Меняйте цвет по своему усмотрению, также можно вставить любую картинку;
border: 1px solid #c0c0c0; – окантовка нашей рамки. 1 пиксел шириной, solid-сплошная линия и цвет окантовки. Тут также все можно менять по своему вкусу;
padding: 3px 5px 3px 30px; – отступы текста внутри рамки начиная сверху, слева 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;   – этот код позволяет выводить закругленные края рамки, если они не нужны, то его можно удалить или за комментировать;
Этот код позволяет выводить наш блок с тенью:
-webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)”;/*Internet Explorer */
box-shadow: 5px 5px 5px #ABC;/*Opera и Firefox*/

2 блок.

.bloginfo-head – название div класса;
font-size:1.4em; – размер шрифта заголовка;
font-weight: bold;  – жирный шрифт;
color:#ED802B; – цвет шрифта в заголовке;
margin: 0 0 5px 0; – отступ заголовка внутри блока;

3 блок.

.bloginfo-txt – название div класса;
line-height: 1.3em; – междустрочный интервал;
color:#2d86de;  – цвет шрифта;
font-size:14px; – размер шрифта содержимого блока;

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

Далее для оформления текста его нужно заключить в теги div блока, примерно так:

Вот несколько примеров создания таких рамок:

Заголовок
Содержимое блока
Заголовок
Содержимое блока
Заголовок
Содержимое блока
Заголовок
Содержимое блока
Заголовок
Содержимое блока с тенью

Как видите, можно создать любую рамку не прибегая к плагинам.
Если ваш блог комментируют, то рекомендую поставить на свой блог бок “Топ комментаторов”, как это сделать вы можете узнать, прочитав эту статью.
На этом пока все. Удачи в оформлении блога!

С уважением, Юрий Хрипачев.

Поделитесь с друзьями в социальных сетях!


Если вам понравился сайт, тут Вы можете подписаться на обновления блога.

Введите свой e-mail адрес:

Навигация

Предыдущая статья: ←

Обсуждение: оставлено 24 коммент.
  1. Лилия:

    Правильно ли я поняла, что при написании каждого поста надо лезть в коды? Спасибо

    • Юрий Хрипачев:

      Нет Лилия, в коды лезть не нужно. Нужно текст, который вы хотите вставить в рамку, заключить в нужный div блок. Далее css сделает все за вас.

  2. Антон Дышлюк:
    http://dyshlyuk.com

    Если делать такие рамки, то код нужно вставлять в текст? что бы получились такие красивые рамки.
    А то не хочется нагружать сайт множеством плагинов, так как вордпрес и так тяжелый(

    • Юрий Хрипачев:

      И в текст, и в файл *.css. Плагины не нужны.

  3. Алекс:

    После строки “Далее для оформления текста его нужно заключить в теги div блока, примерно так:” находится рамка. Но она пустая, в ней нет кода. Не могли бы Вы восстановить этот код.

    • Юрий Хрипачев:

      Исправил, спасибо, что подсказали.

  4. Radu:
    http://musicfordjs.com/

    U menea ne poluchaetsa , vot postavil na etu stranitzu
    musicfordjs.com/ftp/

    Pomoghite pojalusta reshiti problemu

    • Юрий Хрипачев:

      Я не вижу на вашей странице CSS с class=”bloginfo”, вы либо их не прописали, либо это сделали с ошибкой, проверьте еще раз вашу таблицу стилей, браузер не видит class=”bloginfo”, поэтому ничего не отображается.

  5. Radu:
    http://musicfordjs.com/

    postimg.org/image/epcudsejl/

    vot posmotrite, kak na saita napisal

    • Юрий Хрипачев:

      У вас сайт на бутсрапе сверстан? А CSS вы со своими изменениями подключали или в общий файл все записывали?
      По адресу:
      musicfordjs.com/wp-content/plugins/bwp-minify/min/?f=wp-content/themes/flymag/bootstrap/css/bootstrap.min.css,wp-content/themes/flymag/style.css,wp-content/themes/flymag/fonts/font-awesome.min.css

      я не вижу класса bloginfo, в каком файле вы его прописали?

  6. Radu:
    http://musicfordjs.com/

    tam je na skrine vidno, v redaktore , Stylesheet (style.css)

    • Юрий Хрипачев:

      Я вижу, что style.css, но я не вижу, этого файла в браузере и что он подключен. Этот файл от темы или вы его сами создали?

  7. Radu:
    http://musicfordjs.com/

    u menea sait na wordpress

    • Юрий Хрипачев:

      Вот посмотрите, я добавил стили в браузере и выглядит это так: prntscr.com/b01g6d
      Сделайте так, чтобы ваши стили были видны браузеру и все будет нормально.

  8. Radu:
    http://musicfordjs.com/

    ya ne znaiu gde nado dobaviti, dobavil v style.css gde isheo nado, ya ne razberaiusi …

    • Юрий Хрипачев:

      Где вы скачивали эту тему? Дайте ссылку мне.

  9. Radu:
    http://musicfordjs.com/

    ya ne skacial, ona standartnaya

    wordpress.org/themes/flymag/

  10. Radu:
    http://musicfordjs.com/

    pomoghite pojaljsta reshiti problemu, gde napisati stili ? >

    • Юрий Хрипачев:

      Посмотрите внимательно на скриншот:
      prntscr.com/b0b4v8

      Откройте в редакторе файл function.php и добавьте в него строчку, которая выделена желтым цветом в то место, где она добавлена на скриншоте и ваши стили в файле style.css будут нормально работать.
      Чтобы ничего не испортить, сохраните копии изменяемых файлов, чтобы их потом восстановить, если что то сделаете не так.

      Проще всего строчку добавить так: Скопируйте верхнюю строчку и вставьте ее вниз, затем просто измените ее окончание и все будет работать.
      Хотя сейчас у меня все работает и без изменения файла function.php, но сначала тоже не было видно этой рамки.

  11. Radu:
    http://musicfordjs.com/

    Spasibo bolshoe, poluchilosi ;)

  12. Radu:
    http://musicfordjs.com/

    toliko vot drugaia problema, ya meneayu “color:#f3f3f3;” , no tsvet ne meneayetsa,..

    • Юрий Хрипачев:

      На счет цвета не могу так сказать, нужно смотреть.

  13. Виталий:
    http://34.bazarvlg.ru

    Скажите а как сделать или или какой плагин использовать для подобного всплывающего окна..?

    • Юрий Хрипачев:

      Расскажите подробней, что вы имеете ввиду под всплывающими окнами?

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Рекомендую
Интересное на сайте
Лучшие комментаторы
Петр(2)
Андрей(2)
Asya(1)
Олег(1)
Иветта(1)
© 2017 Узнай тут 48  ||  Копирование материала без согласия автора запрещено.
Яндекс цитирования