Как красиво оформить текст в WordPress без плагина
Приветствую Вас на своем блоге!
В WordPress можно красиво оформить текст с помощью плагина WP-Note или Special Text Boxes, а можно и без плагина. Как известно чем меньше плагинов установлено, тем лучше. А может кто-то вообще не любит плагины и старается все делать без них. Самый простой способ красиво оформить текст без плагина, это с помощью таблицы стилей style.css вашей темы.
Для начала нужно написать свойства стиля, как мы будем оформлять текст. Это можно сделать в текстовом редакторе notepad++ или juffed. Так сказать сделать заранее несколько заготовок, а потом их просто подставлять в нужное место
Вот пример такого кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* оформление рамки блока */ .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 блока, примерно так:
1 2 3 4 |
<div class="bloginfo" style="text-align: left;"> <div class="bloginfo-head">Заголовок блока</div> <div class="bloginfo-txt">Содержимое блока</div> </div> |
Вот несколько примеров создания таких рамок:
Как видите, можно создать любую рамку не прибегая к плагинам.
Если ваш блог комментируют, то рекомендую поставить на свой блог бок “Топ комментаторов”, как это сделать вы можете узнать, прочитав эту статью.
На этом пока все. Удачи в оформлении блога!
С уважением, Юрий Хрипачев.
Поделитесь с друзьями в социальных сетях!
Навигация
Предыдущая статья: ← Удаление баннера pornoplayer.exe (2298522950)
Следующая статья: Создание красивого блока с помощью плагина WP-Note →
Правильно ли я поняла, что при написании каждого поста надо лезть в коды? Спасибо
Нет Лилия, в коды лезть не нужно. Нужно текст, который вы хотите вставить в рамку, заключить в нужный div блок. Далее css сделает все за вас.
Если делать такие рамки, то код нужно вставлять в текст? что бы получились такие красивые рамки.
А то не хочется нагружать сайт множеством плагинов, так как вордпрес и так тяжелый(
И в текст, и в файл *.css. Плагины не нужны.
После строки “Далее для оформления текста его нужно заключить в теги div блока, примерно так:” находится рамка. Но она пустая, в ней нет кода. Не могли бы Вы восстановить этот код.
Исправил, спасибо, что подсказали.
U menea ne poluchaetsa , vot postavil na etu stranitzu
musicfordjs.com/ftp/
Pomoghite pojalusta reshiti problemu
Я не вижу на вашей странице CSS с class=”bloginfo”, вы либо их не прописали, либо это сделали с ошибкой, проверьте еще раз вашу таблицу стилей, браузер не видит class=”bloginfo”, поэтому ничего не отображается.
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, в каком файле вы его прописали?
tam je na skrine vidno, v redaktore , Stylesheet (style.css)
Я вижу, что style.css, но я не вижу, этого файла в браузере и что он подключен. Этот файл от темы или вы его сами создали?
u menea sait na wordpress
Вот посмотрите, я добавил стили в браузере и выглядит это так: prntscr.com/b01g6d
Сделайте так, чтобы ваши стили были видны браузеру и все будет нормально.
ya ne znaiu gde nado dobaviti, dobavil v style.css gde isheo nado, ya ne razberaiusi …
Где вы скачивали эту тему? Дайте ссылку мне.
ya ne skacial, ona standartnaya
wordpress.org/themes/flymag/
pomoghite pojaljsta reshiti problemu, gde napisati stili ? >
Посмотрите внимательно на скриншот:
prntscr.com/b0b4v8
Откройте в редакторе файл function.php и добавьте в него строчку, которая выделена желтым цветом в то место, где она добавлена на скриншоте и ваши стили в файле style.css будут нормально работать.
Чтобы ничего не испортить, сохраните копии изменяемых файлов, чтобы их потом восстановить, если что то сделаете не так.
Проще всего строчку добавить так: Скопируйте верхнюю строчку и вставьте ее вниз, затем просто измените ее окончание и все будет работать.
Хотя сейчас у меня все работает и без изменения файла function.php, но сначала тоже не было видно этой рамки.
Spasibo bolshoe, poluchilosi
toliko vot drugaia problema, ya meneayu “color:#f3f3f3;” , no tsvet ne meneayetsa,..
На счет цвета не могу так сказать, нужно смотреть.
Скажите а как сделать или или какой плагин использовать для подобного всплывающего окна..?
Расскажите подробней, что вы имеете ввиду под всплывающими окнами?