style.css - Таблица стилей оформления темы

Вот еще один из очень важных файлов, без которого ни одна тема WordPress вообще работать не будет. Данный файл лучше всего «виден» на главной странице всех WordPress сайтов. От него зависит юзабилити (внешний вид сайта) всех сайтов сделанных на WordPress. В нем можно задать или изменить оформление, фон, шрифт, цвет, интервалы отступа, заливку, тень, градиенты, поэтому он и очень важен.

А вот очередной фрагмент файла:

Этот файл в отличии от всех остальных, описанных выше, целиком написан с использованием разметки веб-стилей CSS . Все коды, что касаются настройки оформления, добавляются в этот файл. Чтобы вставить в него какой-то код вам необходимо прокрутить в конец файла и добавить свой css код с начала новой строки .

Второстепенные файлы

Имеется еще ряд файлов, которые имеют второстепенное значение. Но они так же необходимы для работы вашей темы.

404.php - это файл, который отвечает за страницу ошибки . Если вы или кто-то перешёл по ссылке, которая ссылается на несуществующий пост или страницу на вашем сайте, то он попадает на страницу 404.php, где будет надпись «Извините, такой страницы нет.» , или что-то подобное.

Фрагмент файла:

archive.php - этот файл в ответе за отбор и вывод записей по отобранным критериям: рубрике, автору, дню, месяцу, году или по метке.

Фрагмент файла:

comments.php - здесь все просто, файл в ответе за вывод

- 5.0 out of 5 based on 2 votes

В прошлой статье мы рассмотрели, для нашего блога на WordPress, а здесь рассмотрим, как добавляются посты (заметки) в WordPress.

В WordPress есть два типа контента, это посты или как их еще называют заметки и страницы. Посты это динамический контент который, как правило, постоянно появляется на блоге, в определенных рубриках.

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

Для того чтобы создать пост, пройдите в административной панели WordPress в пункт: «Записи» >> «Добавить новую» .

В результате загрузится текстовый редактор, при помощи инструментов которого вы сможете форматировать текст, подобно тому, как вы это делаете в редакторе MS Word.

1. В поле «Введите заголовок» , укажите название поста.

2. При помощи панели «Загрузить/вставить» , вы сможете загрузить и вставить в ваш пост необходимые изображения и медиа файлы.

3. При помощи вкладок «Визуально» и «HTML» , вы можете переходить к редактированию HTML кода или оставаться работать в визуальной среде.

4. При помощи инструменов панели вы сможете форматировать текст. Нажав на соответствующую иконку, вы откроете дополнительную панель с очень полезными инструментами.

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

Вставляем текст.

Если вы подготавливаете свои тексты в редакторе MS Word, то не копируйте их сразу в окно редактора, используйте инструмент «Вставить из Word».

Для этого скопируйте текст в Word"е, затем перейдите в редактор WordPress и нажмите на иконку «Вставить из Word», после этого вставьте текст в открывшееся окно и нажмите на кнопку «Вставить».

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

Вставляем изображение в текст.

Для того чтобы в текст вставить изображение, установите курсор в то место в тексте, куда необходимо вставить изображение и нажмите на конку «Вставить изображение»:

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

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

Поле «Заголовок» является обязательным к заполнению. Остальные поля «Текст», «Подпись» и «Описание» можете заполнять по желанию.

В поле «Ссылка» можно задать ссылку, которая будет идти по изображению. По умолчанию ссылка идет на изображение, если нажать на кнопку «Ссылка на запись», то ссылка с картинки будет идти на сам пост, если нажать на кнопку «Нет», то ссылки не будет.

В пункте «Выравнивание» , можно задать расположение изображения на странице.

В пункте «Размер» , можно задать размер изображения.

После указания всех параметров, нажмите на кнопку «Вставить в запись» и изображение будет вставлено.

Вставляем тег "Далее".

Выбираем формат записи.

Начиная с WordPress версии 3. X были введены форматы постов. При помощи форматов, вы можете выбрать определенный вид отображения поста. Эта функция дает возможность разработчикам шаблонов, создавать различные типы записей в зависимости от потребностей. В шаблоне установленном в WordPrees по умолчанию, используется три формата отображения поста:

Форматы постов можно выбрать в панели справа от редактора. Форматы постов доступны только в темах для WordPress версии 3. X. Всего поддерживается 10 форматов постов, их наличие зависит от используемой вами темы. При использовании того или иного формата, тегу задается соответствующий класс, при помощи которого данному формату поста можно задать определенное оформление, при помощи CSS.

Наверное ты тоже любишь короткие, но четкие заметки? Я очень люблю, поэтому тебе понравится эта запись.

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

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

Есть до ужаса простое решение! Раздели свою запись на несколько страниц (ну, например, штук на 5). Для этого даже не нужно устанавливать никаких плагинов и ковыряться в коде. Разработчики Вордпресса уже сделали все.

Как разделить запись в wordpress на страницы?

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

Вот как примерно это будет выглядеть (только у тебя будет "Страницы" вместо "Pages"):

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

Разделение на страницы создает новые страницы с уникальным контентом, думаю, что если ты будешь делить таким образом длинные записи на страницы по 1000-1500 символов, то это будет даже хорошо в глазах поисковых пауков.

Оформление ссылок на страницы поста

Вот, что можно с ними сделать, например:

Для этого тебе уже нужно чуть-чуть напрячься и проследовать небольшой инструкции 😛

1. Зайти в админку - Внешний вид - Редактор - справа найти название "Функции темы" (functions.php) и кликнуть по нему.

2. В самый его конец перед тэгом ?> (это закрывающий тэг PHP) вставить следующий код:

Function custom_nextpage_links($defaults) { $args = array("before" => "

4. На той же странице в списке справа выбрать файл style.css, он скорее всего в самом конце списка (а если там есть custom.css , то лучше его).

5. В конец этого файла вставить следующий код:

Page-link { font-size: 22px; text-align: center; margin: 15px 0 25px 0 !important; font-weight: normal !important; } .page-link a { text-decoration: none; }

(Кликни по <2>, чтобы перейти на следующую страницу…)

Желаю, что тебе приходило больше интересных идей. Успехов!

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

По умолчанию WordPress фильтрует любой необработанный код, добавленный в посты, страницы, виджеты или комментарии. Это делается в целях безопасности, чтобы программный код не был исполняемым. Если вы, например, пишете пост сначала в пакете Word или любом текстовом редакторе, а потом вставляете этот текст в поле редактирования поста в консоли WordPress, движок автоматически конвертирует некоторые символы. Например, символ < в режиме просмотра Текст будет преобразован в < . Т.е., если вы вставляете в Визуальном режиме, например, фрагмент кода, который начинается с

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

Попробуйте, например, написать в режиме Текст:

При переключении в Визуальный режим (или же после публикации поста) вы не увидите желаемого текста Hello, World! поскольку система его скрыла, чтобы он не был исполняемым. Вот тут мы и подошли к проблеме: а как же отображать программный код в постах ВордПресс?

Простой способ отображения кода в WordPress

Самый простой способ добавить код в свои посты – делать обертку программного кода в режиме Текст HTML-тегом

Этот тег предназначен для отображения кода в том виде, в котором он был напечатан, т.е., со всеми пробелами, спецсимволами и тому подобное. Можно было бы, конечно, не использовать этот тег, а писать весь программный код сразу с использованием HTML-сущностей, но это очень сложный подход. Гораздо проще писать нужный код в Визуальном режиме редактирования публикации, а потом переключаться в режим Текст и обрамлять нужный фрагмент тегами 
........
 , и при этом все «опасные» символы программирования автоматически преобразуются в HTML-сущности.

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

 


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

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

Тег 
 — блочный, а тег  — инлайновый, т.е., большинство браузеров отображает его как display: inline; и его можно показывать прямо в абзаце, а не с новой строки.

Сложный способ отображения кода в WordPress
К сложному способу отображения программного кода я отношу специальные плагины для этого (например, Crayon Syntax Highlighter, Syntax Highlighter Evolved и подобные). Кто-то может возразить, что это наоборот простой способ, но я считаю, что всякие навороченные плагины только все усложняют. Очень часто можно встретить на сайтах ситуацию, когда ранее оформленный код с использованием шорткодов плагина по истечению времени так и отображается в браузере, например:

 


а должно быть красивое оформление и подсветка синтаксиса. Очень часто такие плагины не совместимы с новыми версиями движка, или же вебмастера часто забывают обновлять их. Или хуже – используют сразу несколько таких плагинов.
Да, такие плагины очень красиво делают подсветку синтаксиса на лету с помощью JavaScript и CSS, но они в основном довольно «тяжелые» для системы, а элементарную подсветку синтаксиса можно сделать без плагинов, с помощью нескольких классов для тегов div , span , code и pre , а также нескольких строк CSS-стилей.
Выбирать вам!
И еще к сложному способу вставки кода в страницы WordPress хочу отнести использование сторонних сервисов. Есть довольно много сайтов, на которых можно писать практически любой код и он будет отображаться так, как и должен. Примеры таких сервисов: CodePen, GitHub Gists и JSFiddle.
Они делают очень красивую подсветку синтаксиса и даже демо-просмотр результата исполнения кода, но сложность их заключается в необходимости использования вставки iframe’ами или же внешними JavaScript-библиотеками. К данному методу я прибегаю только для показа демо результата выполнения кода.
Вывод
Как вы можете видеть, добавление кода на сайт ВордПресс – это не такая уж и сложная задача, но знать основные решения для этого все-таки нужно.
Если у вас есть другие решения добавления кода в посты/страницы WordPress, дайте нам знать в комментариях ниже.
Если вы читаете блоги в Интернете, то наверняка замечали, что выглядят они по-разному. Особенно если речь идет об отображении анонсов новых статей. Прочитав сегодняшний пост до конца, вы узнаете о стандартных возможностях публикации на главной, которые предоставляет движок ВордПресс.
 
Как задать количество постов на главной?
 
Сделать это можно в настройках админки WordPress. Заходите в нее, затем в левом меню находите «Настройки», «Чтение» и ставить нужное вам количество постов в поле «На страницах блога отображать не более».
 
Главных недостатков при данном типе вывода материала два:
 
В глазах поисковиков на вашей главной странице происходит дублирование контента.
 
Главная страница может стать похожа на бесконечную «простыню».
Чтобы вывод постов в рубриках стал более юзабельным, рекомендуется заменить опцию the_content на the_excerpt. При этом вы еще и уменьшите степень дублирования контента на блоге. Выполняется данная настройка в файле archive.php.
 
Используя the_excerpt под заголовком публикации, будет выводиться 55 первых слов вашего поста. Если вас это не устраивает, можно настроить все с помощью functions.php. Открываете данный файл, добавляете парочку новых строк:
 
function new_excerpt_length($length) {
 
add_filter(‘excerpt_length’, ‘new_excerpt_length’);
 
Там, где написано 30, можно поставить нужное число. Оно обозначает число слов, которые будут отображаться на веб-страницах рубрик ВордПресс под заголовками.
  
functionnew_excerpt_more($more) {
  
add_filter(‘excerpt_more’, ‘new_excerpt_more’);
 
Ну а чтобы настроить вывод на главной только заголовков постов, достаточно будет удалить из archive.php или index.php опцию the_excerpt или the_content.
 
Как сделать главную в WordPress статической (постоянной)?
 
Решается этот вопрос в четыре простых шага:
 
Создаете и публикуете статическую страницу, которая будет в полной мере соответствовать вашим требованиям.
 
Создаете, а затем публикуете пустую страничку. В содержании нет необходимости, а вот название придумайте обязательно (Новости, Блог и так далее).
 
Заходите в Настройки/Чтение и выбираете статическую страницу вместо «Ваши последние записи». Здесь же нужно будет выбрать недавно созданную страничку под названием «Главная».
Добавляете в основное меню «Блог» либо «Новости», который неизменно приведет к только что созданной страничке с таким названием.