WordPress

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

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

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

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

/* оформление рамки блока */
.bloginfo {
    background: #eef0ed;
    border: 1px solid #c0c0c0;
    padding: 3px 5px 3px 30px;
    margin: 50px;
    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*/
}
/* оформление заголовка блока */
.bloginfo-head {
    font-size:1.4em;
    font-weight: bold;
    color:#ed802b;
    margin: 0 0 5px 0;
}
/* оформление текста блока */
.bloginfo-txt {
    line-height: 1.3em;
    color:#0d7bb8;
    font-size:11px;
 }

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

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

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 блока, примерно так:

Заголовок блока
Содержимое блока

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

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

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

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

Еще по теме:

Напишите что нибудь:

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

Обсуждение: 24 комментария

  • Лилия написал:

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

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

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

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

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

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

  • Алекс написал:

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

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

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

  • Radu написал:

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

    Pomoghite pojalusta reshiti problemu

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

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

  • Radu написал:

    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, в каком файле вы его прописали?

  • Radu написал:

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

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

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

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

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

  • Radu написал:

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

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

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

  • Radu написал:

    ya ne skacial, ona standartnaya

    wordpress.org/themes/flymag/

  • Radu написал:

    pomoghite pojaljsta reshiti problemu, gde napisati stili ? >

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

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

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

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

  • Radu написал:

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

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

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

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

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

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