Правила верстки CSS WordPress каскадные стили CSS на WordPress

Содержание материала:

WordPress style.css

style.css — файл темы WordPress

style.css — файл стилей темы WordPress, в котором содержится CSS-код сайта.

В файле style.css размещается CSS-код отвечающий за форматирование темы WordPress. Данный файл практически ничем не отличается от других CSS-файлов, за исключением того, что вначале этого файла нужно разместить специальный комментарий описывающий тему WordPress.

Схема данного комментария, выглядит следующим образом:

Комментарий состоит из наборов свойство: значение , например Theme Name: — это свойство, а Название темы — это значение.

Рассмотрим пример комментария для файла style.css, нашей темы WordPress, не обязательные свойства пока опустим:

Добавив данный комментарий в файл style.css, по адресу /wp-content/themes/mytheme/ .

Мы зайдя в админку WordPress и перейдя во Внешний вид -> Темы , далее нажав по кнопке Информация о теме

Можем увидеть значения свойств нашего комментария.

Изменение оформления элементов сайта с помощью Дополнительных стилей в WordPress

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

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

Есть подобные настройки и в стандартных темах, поставляемых вместе с WordPress.

Но, в случаях, когда нужной настройки нет — справиться с вопросом поможет CSS.

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

Получить представление об устройстве CSS, приемах работы и ознакомиться со списком существующих правил можно в интернете, например, на сайтах htmlbook.ru, webref.ru и т.д.

Для добавления своего CSS-кода WordPress предоставляет специальный инструмент — Дополнительные стили. Если Вы находитесь на публичной части сайта, в него можно попасть нажав кнопку «Настроить» в верхней части экрана, а затем по пункту «Дополнительные стили». Из админ панели: Внешний вид -> Настроить -> Дополнительные стили.

Данный раздел представляет из себя поле, в которое Вы можете добавлять свои CSS-стили.

Чтобы привязать CSS-правила к определенному элементу необходимо узнать его тег и атрибуты. Для этого воспользуемся Инструментами разработчика на примере браузера Google Chrome.

Щелкнем правой кнопкой мыши по интересующему элементу и в контекстном меню выберем пункт «Просмотреть код». После чего откроется окно инструментов с активной вкладкой «Elements».

Для примера изменим цвет надписи WP TEST на синий. Элемент представляет из себя ссылку (тег a), но не имеет атрибутов class или id, к которым мы могли бы привязать CSS-правила. Уровнем выше есть элемент с тегом h1 (заголовок) и классом «site-title», он является родительским для ссылки WP TEST. Добавим CSS-правило для тега a с учетом родительского класса «site-title» в поле Дополнительные стили.

Как сверстать собственный шаблон под WordPress

Чтобы сделать свой сайт на WordPress, вам обязательно нужно будет добавить тему. Их еще называют шаблонами. Это основа любого веб-ресурса.

В данной статье будут рассмотрены этапы создания шаблона, описана верстка файлов psd.

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

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

Для каких целей создается тема вручную

Тема (шаблон) – это совокупность функциональных и стилевых файлов, которые в сумме определяют дизайн ресурса. От темы зависит то, как будет выглядеть сайт, потому очень важно правильно подойти к процессу создания шаблона. Многие сейчас задаются вопросом: “А зачем создавать свою тему, если можно скачать уже готовую в Интернете, причем бесплатно?”. Это логичный вопрос и на него есть вполне исчерпывающий ответ: “Чтобы сделать идеальный шаблон, который полностью отвечает вашим требованиям”.

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

Кроме того, после создания шаблона вы ощутите себя “медиком” WordPress – будете знать, что у сайта находится внутри. Поймете, какие элементы за что отвечают. Тогда сайт и вы будете разговаривать на Ты. Ознакомитесь с тегами, структурой и циклами WordPress. А быть может, вам захочется заняться этим профессионально, и вы начнете зарабатывать на жизнь созданием шаблонов.

Итак, вот основные причины, почему вам стоит самостоятельно сделать шаблон для сайта:

  • узнаете все о HTML, CSS и кое-что о PHP;
  • сможете творить, ведь веб-дизайн – это тоже искусство;
  • можно будет зарабатывать на продаже тем;
  • откроете для себя новый навык;
  • создадите оформление, которое 100 % будет подходить под ваш будущий сайт.

Каким стандартам отвечает тема

При написании шаблона очень важно следовать официальным правилам. Нарушение кода, вставка тега в неположенном месте и пропуск его – это может навредить оформлению и полностью испортить его вид. Вам следует хорошо ознакомиться с правилами написания PHP-код, а также HTML, если вы еще не знакомы с этими языками. Кроме того, вам предстоит иметь дело с каскадными таблицами стилей CSS, так что вспомните и их основы – в Интернете много информации по этому поводу. Ну, и самое последнее наименее важное требование – создавайте сайт, как дизайнер, а не как школьник, чтобы у вас получился серьезный проект. Иначе нет смысла браться за это дело.

Все темы WordPress содержатся на хостинге в папке wp-content/themes/. Внутри этой папки есть другие папки с отдельными темами, файл с дополнительными функциями (functions.php), стилевые файлы и изображения. Чтобы найти данные по отдельной теме, вам необходимо зайти в соответственную директорию. Так тема “Vestern” будет размещена в папке wp-content/themes/vestern/.

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

Вы заметите, что шаблон, как правило, состоит из файлов трех форматов:

  1. Style.css – стилевой файл, ответственный за внешнее оформление сайта.
  2. Functions.php – функциональный файл, добавляющий на страницы различные возможности.
  3. Другие php-файлы, которые отвечают за особенности вывода шаблона на сайте, интеграцию темы с WordPress. Именно эти файлы позволяют перевести psd макет в полноценный шаблон.

Разберем каждый их этих файлов детальнее, чтобы понять как проходит верстка темы WordPress.

Правила создания файла style.css

Во-первых, он должен отвечать всем особенностям разметки CSS. От этого файла зависит то, как будет выглядеть ваш сайт. Но он не заработает, если вы не добавите в него описание созданного шаблона. Эта первая особенность WordPress, которую необходимо учитывать при переносе макета psd на движок Вордпресс. Вам предстоит указать следующие параметры:

  1. Имя шаблона.
  2. URL, который ведет к теме.
  3. Описание с указанием основных особенностей шаблона. Кратко.
  4. Имя автора. В данном случае укажите свое имя.
  5. Ссылка на автора, то есть на вас. Можете указать ссылку на профиль в социальных сетях.
  6. Название родительской темы – это указывать необязательно.
  7. Версия темы. Если только создали, тогда v. 1.0.
  8. Полное описание шаблона. Можно писать развернуто.

Чтобы создать самую простую тему WordPress, достаточно добавить редактированную версию с одним файлом style.css. В этом файле возле строки “template” укажите имя родительской темы. К примеру, Classic, если вы редактируете стандартный шаблон. Теперь созданная тема будет полностью соответствовать шаблону Classic. Потому файлы вам нужно будет загружать именно в директорию wp-content/themes/classic.

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

Особенности файла дополнительного функционала functions.php

Шаблоны не всегда используют файл functions.php, но в большинстве случае он необходим. Его необходимо размещать в директории с соответственной темой. Учтите, что если этот файл имеется в папке с шаблоном, то он будет учитываться при инициализации темы. Он работает как плагин. И будет выполнять такие функции, какими вы его наделите.

Основное предназначение файла functions.php – это определение доступных функций настройки в админке для данной темы. То есть все функции, которые вы впишите в functions.php будут отображаться в админпанели, либо на странице для пользователя. Обычно, это смена цветового решения для сайта WordPress, изменение шрифта и многое другое. Но есть множество вариантов использования этого файла. Однако, это уже совсем другая история…

Особенности php файлов шаблона

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

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

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

Даже если вы случайно не укажите какой-либо файл шаблона, WordPress автоматически внесет на сайт собственные стандартные параметры настроек. Например, если не добавить файл, ответственный за комментарии, то движок отыщет в директориях свои варианты этой функции – к примеру, wp-comments.php. Тогда в структуру вашего сайта врежется “чужеродные” комментарии, которые не будут отвечать требованиям шаблона. Чтобы такого не случилось, вам необходимо добавить все основные файлы для отображения разных составляющих страницы:

  • header.php – отвечает за шапку сайта;
  • sidebar.php – боковые колонки;
  • footer.php – подвал ресурса (его нижняя часть);
  • comments.php и comments-popup.php – комментарии.

После генерации каждого из этих файлов, чтобы сайт начал их отображать, вам необходимо внести данные по ним в главный файл шаблона index.php. Для этого укажите в index.php теги, которые ведут к названным файлам. Например:

    чтобы добавить файл шапки сайта (header.php) пропишите тег

get_header () tamplate tag;

  • для футера аналогично, только вместо header укажите footer и т. д.
  • Пример включения одного из файлов шаблона в index.php будет выглядеть следующим образом: . Вам придется искать по каждому из указанных ключевых файлов шаблона отдельную информацию. Найдите мануалы по каждому из файлов, а также образцы, чтобы вы понимали все функции, прописанные в шаблонах.

    Выбор функционала шаблона

    Со временем вы столкнетесь с дилеммой – какой тип шаблона выбрать. Движок предоставляет выбор. Либо вы сможете выбрать шаблон с подключенной иерархией Template Hierarchy, либо макет с тегами Conditional Tags.

    Первый вариант уже был рассмотрен. Все файлы php шаблона – это и есть иерархия Template Hierarchy. То есть следуя правилам этой иерархии, вы постепенно генерируете отдельные файлы макета. Таким образом, у вас создастся полноценный шаблон из ряда функциональных php-составляющих. Иерархия в этом случае работает по принципу загрузки по запросу. К примеру, если у вас есть файл категорий (category.php) и пользователь запросил его, то в браузере загрузится именно эта составляющая сайта. Если же его нет, тогда будет загружен ключевой файл шаблона index.php.

    Таким образом, вы сможете изменять внешний вид для отдельных частей сайта при помощи принципа Template Hierarchy. У каждой страницы есть свой определенный ID. Добавьте в директорию с темой файл category-6.php и при запросе рубрики с ID, равным 6, откроется именно это оформление. Если же его не будет, то настройки останутся стандартными – развернется index.php.

    Порой принципа Template Hierarchy оказывается недостаточно, чтобы обеспечить максимально комфортное отображение шаблона. В таком случае программисты прибегают к использованию второго принципа – они вводят условные теги Conditional Tags. Эти теги проверяют сайта на соблюдение определенных условий, и если таковые не соблюдаются, они изменяют его внешний вид. То есть эти теги работают по принципу if/else (если/тогда). Так вам не придется добавлять море файлов php с номером каждой категории, а сможете единожды прописать условия для каждого ID.

    Как происходит верстка psd макета в Вордпрессе

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

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

    PSD – это файл из приложения Photoshop. Это как бы графическое изображение вашего дизайна. Чтобы его сверстать, необходимо в текстовом редакторе добавить html-разметку. Постепенно вы будете изменять каждый из пунктов этой разметки, добиваясь конечного результата, который изображен на макете. Сразу укажите центрирование вашего шаблона, а также размеры разных его частей.

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

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

    Стили CSS, использование в WordPress

    Стили CSS, как они используются в CMS WordPress, именно эти вопросы разберем в этом посте.

    Стили CSS или стандарты CSS являются понятиями-синонимами. Использование технологии CSS значительно облегчают жизнь вебдизайнерам при разработке и верстке страниц своих сайтов.

    Как уже было сказанов статье «Стандарты CSS», при помощи стилей CSS мы описываем параметры и характеристики представления блоков и элементов страниц сайта. Для начала вспомним из каких основных блоков состоят страницы среднестатистических сайтов.

    Топ-пост этого месяца:  Учимся производить с помощью PHP запись строки в файл

    Элементы страницы сайта

    В общем виде страница сайта состоит из следующих основных блоков:

    1) Шапка сайта или Header.

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

    2)Информационный блок.

    Это основной блок страницы, содержит уникальное для каждой страницы содержание. Но оформление всех страниц для этого блока также будет одинаков.

    3)Виджеты.

    Это боковые колонки сайта. Их может быть несколько. Чаще всего один или два. Располагаться виджеты могут в нескольких вариациях:

    • справа от информационного блока
    • слева от информационного блока
    • справа и слева от информационного блока

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

    4) Подвал или Footer страницы.

    Располагается внизу страницы и для всех страниц сайта одинаков.

    Все эти блоки, в свою очередь, состоят из отдельных составляющих, их называют элементами блоков. Что это за элементы?

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

    Так вот для описания всех этих элементов и служат стили CSS. И находятся эти описания в специальных файлах с расширением .css.

    Применение стилей CSS в CMS WordPress

    Теперь переходим ближе к теме нашей статьи – использование стилей CSS в CMS WordPress.
    В каждом сайте, функционирующем на WordPress, дизайн определяется шаблоном или темой. Файл, содержащий все элементы CSS, называется style.css.

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

    Располагается этот файл в папке используемой темы. Если зайти на хостинг сайта по ftp-протоколу, то путь к файлу будет следующим:

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

    В каких случаях стоит заниматься изменением стилей в файле style.css?
    Если Вас дизайн сайта в целом устраивает, но хочется какой-то элемент подправить. Изменить размер или цвет шрифта в каком-то блоке, изменить цвет заливки или рисунок. да мало ли что мы захотим изменить.

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

    на рисунок этой симпатичной птички-говоруна.

    Это было сделать несложно. Я нашел в файле блок описания цитат, привожу этот фрагмент ниже

    /* Start blockquote */
    blockquote
    <
    margin:10px 10px 10px 50px;
    padding:5px 5px 5px 41px;
    background-color:#CCE1E5;
    background-image:url(‘images/PostQuote1.png’);
    background-position:left top;
    background-repeat:no-repeat;
    >
    /* Finish blockuote */

    Затем загрузил в в папку images своей темы изображение с именем PostQuote1.png и откорректировал запись в этом блоке. Для этого пришлось изменить только одну строку в файле style.css. Таким образом можно менять любые элементы дизайна на своем сайте на движке WordPress. Я решил дать Вам небольшую инструкцию по изменению стилей CSS.

    Изменение элементов дизайна

    • 1.Четко определяем, что нам надо менять. Конкретный элемент дизайна.
    • 2.Сохраняем копию файла style.css на свой компьютер
    • 3.Открываем файл style.css любым редактором, Блокнотом или Notepad будет предпочтительнее.
    • 4.Находим элемент дизайна для изменения.
    • 5.Изменяем директивы css
    • 6.Сохраняем изменения в файле style.css и загружаем его на хостинг.
    • 7.Тестируем результаты нашей работы.
    • 8.Если все нормально, то завершаем наши усилия, в противном случае продолжаем работу.

    Вот Вам ориентировочный план действий.

    И еще предлагаю Вам посмотреть хорошее доходчивое видео на тему стилей CSS и его месте в сайтостроении.

    Верстка шаблона WordPress из HTML макета

    В одной из статей я рассказывал, как делать шаблон сайта средствами HTML и CSS. Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.

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

    Распределяем код по файлам

    1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/.

    2. Переименуйте файл styles.css в style.css.

    3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:

    Как вы могли догадаться, это служебная информация о теме оформления: название, автор, описание, лицензия, версия и т. д. Правые части строк вы можете заменить на собственные, то есть задать свои авторство, версию, описание и прочие данные.

    4. Создайте файлы header.php, index.php, sidebar.php, footer.php и распределите по ним код из index.html.

    4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css — новое корректное имя файла.

    4.2. В index.php вставьте код основного блока (со строки по строку ).

    4.3. В sidebar.php скопируйте код бокового меню (с по ).

    4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html).

    5. Удалите index.html.

    6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы. Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.

    Адаптируем header

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

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

    1. Откройте файл header.php и замените содержащийся в нём код до блока

    Мы сделали динамическим блок

    — код вызывает функцию, возвращающую языковые атрибуты в контейнер.

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

    — важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.

    2. Перейдите к редактированию файла index.php. В самом его начале пропишите

    Строчки вызывают файлы шапки, боковой панели и низа сайта.

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

    Делаем динамическим верхнее меню

    Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php, что крайне неудобно.

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

    так, чтобы получилось следующее:

    Для того, чтобы меню стало отображаться, в панели управления сайтом откройте Внешний вид -> Настроить -> Меню и либо переименуйте уже созданное меню в menu, либо создайте меню и настройте его на своё усмотрение, но обязательно присвойте ему имя menu.

    Суть действий в том, что файл header.php функцией wp_nav_menu(‘menu=menu’); открывает меню под названием menu, которое, чтобы отобразиться, должно быть правильно названо и настроено в панели администрирования WordPress. Название menu вы можете поменять на любое другое, главное, чтобы имя совпадало и в настройках сайта, и в коде header.php.

    Теперь обновите страницу и оцените результат.

    Навигация явно куда-то съезжает, хоть и делает это красивой лесенкой. Так происходит потому, что меню нашего шаблона было неосмотрительно реализовано внутри таблицы, а надо было оформлять его списком. Частично исправить ситуацию можно, добавив в файл style.css следующий код:

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

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

    Завершаем «шапку»

    Единственные элементы файла header.php, оставшиеся статическими — имя и описание сайта. Чтобы они брались из настроек, задаваемых в админ-панели, замените отвечающий за вывод текста в шапке код на следующие строки:

    Обновите страницу — результат не заставил себя долго ждать.

    Работа с файлом header.php на этом завершена, в итоге он имеет следующий код:

    Выводим посты

    Переходим к части, содержащей основной контент страницы — редактироваться будет файл index.php.

    Удалите содержимое блока right и вместо него вставьте код динамического отображения постов. Либо же удалите из файла весь код и вместо него вставьте следующее:

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

    — отображает заголовок поста.

    — дата в формате день, месяц (сокращённо), год. Теги, комментарии.

    — конец цикла при условии, что записи были.

    — если же материалов нет, вывести об этом соответствующую надпись и покинуть цикл.

    — вывод постраничной навигации при условии, что на одной они не помещаются.

    Простой с виду код глобально изменил страницу — блог стал по-настоящему динамическим. Каждый пост можно посмотреть, ссылки работают.

    Дальнейшее оформление и размещение элементов зависит только от вашей фантазии и навыков вёрстки — с отображением данных можно делать всё, что угодно, но работа над шаблоном ещё не завершена.

    Добавляем виджеты

    Слева от основного контента в шаблоне есть панель, на ней — блок Информация (своего рода виджет) и боковое меню. Информационный блок не должен быть статичен, а так как он очень напоминает виджет, предлагаю виджетом его и сделать. Для этого необходимо:

    1. зарегистрировать блок виджетов;
    2. вывести его в нужном месте.

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

    2. Внесите в следующий код:

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

    3. В файле sidebar.php сотрите строки:

    и вместо них запишите:

    Блок Информация ожидаемо исчез, сбоку осталось только пока ещё статическое меню.

    4. Зато перемены к лучшему произошли в админ-панели — раздел Внешний вид обзавёлся подпунктами Виджеты и Меню. Перейдите в первый. Откройте его и посмотрите: внутри появился зарегистрированный в файле functions.php блок (у меня это MySidebar).

    5. Чтобы воссоздать информационный блок, перетащите на сайдбар виджет Текст, в поле Заголовок введите Информация, в поле Текст — код

    и нажмите кнопку Сохранить.

    6. Обновите страницу блога — блок удалось воссоздать практически один в один (мелкие нюансы меняются в файле style.css и заострять на них внимание я не буду).

    Адаптируем меню

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

    1. Удалите огромный вложенный список меню в файле sidebar.php и вместо него введите код:

    2. В панели управления WordPress откройте Внешний вид -> Настроить -> Меню, нажмите кнопку Добавить меню, назовите его так, чтобы имя в админ-панели совпадало с именем в коде страницы sidebar.php (у меня это left_menu) и добавьте все необходимые пункты.

    3. Сохраните изменения, обновите страницу и убедитесь, что динамическое меню левой части сайта работает и отображается правильно.

    Код страницы sidebar.php по сравнению с исходным сильно уменьшился и в итоге стал таким:

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

    Работаем с файлом footer.php

    Так как смысловую нагрузку «подвала» сайта может возникнуть желание рано или поздно изменить, предлагаю реализовать вывод с помощью виджетов, как информационный блок в сайдбаре.

    1. Откройте файл function.php и перед дескриптором ?> вставьте такой код:

    Тем самым вы регистрируете блок виджетов с именем foot, которое как бы намекает на его расположение.

    2. В файле footer.php весь код внутри контейнера footer замените одной строкой:

    Она выводит зарегистрированный в файле functions.php блок foot.

    3. Перейдите в админ-панель WordPress, откройте страницу настройки виджетов, перетащите в область foot блок Текст, в поле Текст: введите что угодно, например, нижеследующее.

    Поле Заголовок можно оставить пустым.

    4. Не забудьте сохранить изменения и оцените результат: идентичный статическому шаблону низ сайта, реализованный виджетом.

    Да и весь шаблон в целом стал полностью динамическим, сохранив при этом свой прежний внешний вид. Таким образом и верстаются шаблоны под WordPress. И если вы когда-нибудь услышите фразу «Натянуть шаблон на WordPress», знайте: вы это уже делали — описанные в статье действия простым языком называются именно так. Конечно, в работе с темами WordPress и тем более в их адаптации есть уйма тонкостей, но общий принцип построения и вёрстки остаётся неизменным.

    Как добавить произвольные CSS-стили к своему WordPress-сайту: три способа

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

    Поиск элементов дизайна, которые вы хотите изменить

    Как только вы выделите участок вашей темы, который вы хотите изменить (к примеру, заголовок записи), вам нужно будет установить CSS правила, которые будут применяться к этому участку, чтобы должным образом его стилизовать. К счастью, выделение участка – процесс несложный.

    В CSS используются селекторы, которые позволяют определить то, какие объявления дизайна будут применяться к определенному участку вашего сайта. Обычно это реализуется при помощи задания класса для требуемого элемента. Однако CSS может также использоваться для определения целого элемента (к примеру, для тега body) или для элемента на основе его ID.

    К счастью, популярные браузеры позволяют вам видеть, какие селекторы и какие объявления применяются к элементу страницы. Делается это при помощи пары кликов. В Google Chrome, к примеру, вы можете просто выделить определенный фрагмент документа, после чего выполнить правый щелчок по нему, как показано ниже.

    Выберите Inspect Element (Проинспектировать элемент) из выпадающего меню, после чего вы сможете получить доступ к информации о дизайне, представленной в окне справа. Пример этого приведен далее.

    Пункты, подсвеченные красным – это дескрипторы, которые применяются к тексту, выделенному вами. К примеру, элемент font-size показывает, что текст, выделенный вами, имеет размер 13 пикселей («13px»). Дескрипторы находятся в фигурных скобках и относятся к определенным селекторам. Название соответствующей таблицы стилей выводится справа от селекторов.

    Как только вы вооружитесь этой информацией, вы сможете легко изменить дизайн. К примеру, если вы хотите изменить шрифт с 13px до 14px, вам достаточно просто найти файл стилевой таблицы, который отображается справа от соответствующих селекторов (#plugin-info .block-content”), после чего меняете в нем «13px» на «14px».

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

    Как работает связка WordPress и CSS

    Никакие две темы WordPress не являются одинаковыми. Поэтому учтите, что советы, которые вы прочтете далее, могут не совпадать на 100% с тем, что вы имеете.

    Однако, скорее всего, необходимые CSS стили будут располагаться в файле style.css. Это – универсальное название стилевой таблицы для любого типа сайтов, а не только для сайтов WordPress.

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

    Учитывая это, давайте перейдем к рассмотрению трех методов редактирования CSS.

    Метод 1. Редактирование файла style.css вашей темы

    Есть два способа получения доступа к файлу style.css вашей темы.

    Первый способ – доступ из консоли WordPress. В левом меню вы найдете пункт Внешний вид. Вложенное в него меню должно включать в себя дополнительные опции. В самом низу этого меню вы найдете пункт Editor (Редактор). Щелкните по нему.

    Как только вы перейдете к странице редактора, вы увидите список файлов в вертикальной панели с правой стороны страницы. В самом низу панели будет находиться искомый файл style.css.

    Если вы щелкнете по пункту Stylesheet (стилевая таблица), файл style.css будет загружен и выведен в самом центре экрана. Вы можете использовать этот экран для редактирования файла, однако есть и более удобный способ это сделать (о нем далее).

    Еще один способ обратиться к таблице стилей заключается в том, чтобы найти ее на сервере вашего хостинг-провайдера. Точное расположение папки с темой будет зависеть от вашего провайдера. В примере ниже папка с сайтом называется thecare и находится она в папке public_html. Поскольку на сайт установлена система WordPress, вы можете видеть папку wp-content в папке thecare. В wp-content находится папка themes, которая содержит установленные темы. Поскольку мы используем тему Newsletter, корректные стили style.css для нее находятся в папке newsletter-parent.

    В данный момент вы могли бы задать вопрос: «Почему здесь находятся папки newsletter-parent и newsletter-child?» Хороший вопрос, и мы в скором времени дадим на него ответ.

    Метод 2. Использование дочерней темы для редактирования CSS

    Если вы скачали фантастическую тему и хотите внести некоторые изменения в нее, вы должны сделать это с помощью дочерней темы, а не редактировать основную тему (родительскую).

    Топ-пост этого месяца:  Как выбрать курсы 1С программистов

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

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

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

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

    Метод 3. Использование плагина для редактирования CSS

    Самый удобный способ редактирования CSS стилей – это использование плагинов.

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

    Вот лишь некоторые великолепные плагины для редактирования CSS:

    Simple Custom CSS

    Simple Custom CSS – одно из самых популярных решений для редактирования CSS стилей. Плагин был загружен более 100 000 раз и имеет рейтинг в 5 звезд.

    WP Add Custom CSS

    WP Add Custom CSS – плагин, который позволяет вам менять внешний вид всего сайта или только некоторых отдельных записей. Великолепный вариант, если вам требуется гибкость дизайна для разных записей.

    Плагин в данный момент набрал более 10,000 скачиваний.

    Theme Junkie Custom CSS

    Если вам нужно решение, которое предлагает лайв-превью ваших изменений, рассмотрите плагин Theme Junkie Custom CSS. Данное решение добавляет произвольный CSS-менеджер к вашей администраторской консоли, где вы можете вносить свои собственные стили.

    Easy Code Placement

    Easy Code Placement – нечто большее, чем просто CSS решение. Плагин позволяет вам добавлять и другие типы кода, включая PHP, JS, HTML и даже обычный текст.

    Если вы меняете разметку темы, вам может понадобиться внести коррективы не только в CSS, но и в другой код. В таком случае Easy Code Placement – решение для вас.

    Child Theme Configurator

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

    Разные CSS стили таблиц для блога на Вордпресс

    В двух предыдущих публикациях (статья-1 и статья-2) мы разбирались, как прописать стиль для таблицы в CSS и как вставить эту таблицу в публикацию при помощи html. Однако, все блоги — разные. А значит для каждого требуется особый внешний вид таблицы, который будет отражен в style.php. Сегодня я предлагаю вам еще три стиля таблиц, которые вы можете использовать на своем блоге.

    Как работать со стилями CSS и HTML?

    Чтобы лучше понимать, как воспользоваться кодами — прочитайте внимательно обе предшествующие статьи, посвященные CSS стилям таблицы и HTML форматированию. Еще настоятельно рекомендую сайт http://htmlbook.ru/ , который просто ломится от важной информации, которой должен пользоваться каждый, чтобы успешно вести блог. Это учебник по CSS и HTML, справочник, шпаргалка, кладезь идей…

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

    Стиль таблицы №1

    7,0,1,0,0

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

    Чтобы таблицы на вашем блоге выглядели так, пропишите в своем файле style.php следующий код:

    Для того, чтобы таблицы выглядели именно так, нужно добавить к html-тегу

    селектор класса .tabstyle1 — получится вот так:

    Если вам не особенно понятно сказанное выше — почитайте о html-форматировании таблицы.

    Стиль таблицы №2

    15,1,0,0,0

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

    Чтобы таблицы на вашем блоге расцвели — вставляем в style.php такой код:

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

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

    Теперь осталось добавить нужный класс к html-тегу таблицы^

    Стиль таблицы №3

    23,0,0,1,0

    А это некий компромиссный стиль таблицы. С одной стороны, он достаточно аскетичен, но цветные ячейки выглядят живенько.

    Чтобы оформить таблицы таким образом, нужно вставить в style.php такой код:

    Для того, чтобы таблица на вашем блоге приобрела такой вид — нужно добавить к html-тегу такой класс:

    Но от этого некоторые строки не станут цветными. Для тех строк, которые должны иметь цветной фон, нужно добавлять свой класс:

    Я, например, отметил таким образом вторую и четвертую строки таблицы

    WP Magazine

    Про WordPress на русском языке

    Как редактировать CSS в WordPress

    Для внесения изменений во внешний вид сайтов на WordPress часто приходится редактировать код CSS. В этой статье мы рассмотрим несколько способов изменения CSS кода в темах WordPress.

    Редактирование файла style.css вашей темы

    Самым распространённым спобом редактирования CSS кода вашего сайта WordPress является его изменение в файле style.css вашей активной темы. Все темы в WordPress находятся в директории wp-content/themes и по названию вашей активной темы, вы сможете легко определить в какой директории она располагается.

    Для редактирования файла style.css вашей темы вам необходимо иметь доступ к сайту через FTP, или поддержку изменения файлов темы прямо из панели администрирования WordPress. Если изменение файлов из панели администратора поддерживается вашим хостинг провайдером, вы найдёте эту возможность в разделе Внешний вид → Редактор.

    Редактор темы в WordPress

    Убедитесь, что в списке справа выбран файл style.css (таблица стилей). Редактировать файлы .php таким образом крайне не рекомендуется, поскольку малейшая ошибка может привести к поломке вашего сайта. Более надёжным методом является редактирование через FTP.

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

    Дочерние темы WordPress

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

    Для создания новой дочерней темы, дайте ей новую папку в директории wp-content/themes и поместите в неё пустой файл с названием style.css. Путь до вашего файла стилей будет выглядеть следующим образом: wp-content/themes/my-child-theme/style.css , где my-child-theme — название нашей новой дочерней темы.

    Откройте файл style.css вашей дочерней темы в вашем любимом текстовом редакторе, и впишите в него следующий код:

    Директивой Theme Name мы указываем название нашей дочерней темы, а на следующей строке директивой Template указываем на родительскую тему, которую хотим использовать. В нашем случае это тема Twenty Twelve, которая находится в директории twentytwelve .

    После заголовка темы, командой @import мы включаем стили темы Twenty Twelve, а всё что следует ниже — наш собственный CSS код. В нашем случае мы изменяем цвет фона на красный.

    Сохраните изменения в файл style.css вашей дочерней темы, и загрузите всю директорию my-child-theme на сервер по FTP. Вы увидите, что ваша новая дочерняя тема доступна при выборе тем в разделе Внешний вид → Темы.

    Дочерняя тема WordPress

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

    Редактирование CSS с помощью плагина

    Ещё одним методом редактирования CSS кода в WordPress является использование плагина. Существует немалое количество плагинов, позволяющих изменять таблицу стилей. Мы рекомендуем бесплатный плагин Jetpack, который содержит модуль Custom CSS.

    Редактор CSS в Jetpack

    Модуль Custom CSS позволяет редактировать стили прямо из панели администрирования WordPress и не требует FTP доступа или особых настроек хостинг площадки. Custom CSS имеет подсветку и проверку синтаксиса, поддерживает ревизии, а так же несколько CSS препроцессоров (LESS и Sass).

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

    Константин Ковшенин 05.06.2013 05.11.2013

    Сооснователь журнала WP Magazine и первой конференции WordCamp в России. Разработчик в компании Automattic, принимает активное участие в развитии ядра WordPress. Любимый язык программирования: Python.

    Подписаться на рассылку

    Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

    Читайте также

    Топ 20 тем для WordPress за октябрь 2020

    Bento – многоцелевая бесплатная тема для WordPress

    Лучшие бесплатные темы для WordPress за июнь 2020

    Пять новых стартовых тем на основе Underscores

    Очень интересно что можно делать дальше. Я сделал style.css в новой папке, вставил код как показано на странице https://wpmag.ru/2013/edit-css-wordpress/ и закачал JetPack. С последним не совсем понятно что делать, но какие-то кнопки нажимаю пока.
    Я хочу понять как с помощью этого руководства можно вставить, например, логотип слева от заголовка именно в теме Twenty Twelve, где его нет вовсе. Т.е. как пишут «замените существующую строчку на ‘эту» в моём случае не проходит, существующей строчки у нас нет.

    Евгений, действительно заменять ничего не нужно, поскольку CSS вы пишите поверх существующего. Вставить картинку в Twenty Twelve вы можете следующим CSS кодом:

    .site-title a <
    text-indent: -9999px;
    background: url(‘http://example.org/image.png’) 0 0 no-repeat;
    width: 500px;
    height: 110px;
    >

    Естественно example.org/image.png заменить на адрес вашего изображения, которое вы можете загрузить в медиатеку WordPress.

    Константин, вопрос собственно по плагину Jetpack , а точнее по его активации. Акаунт на WordPress.com. имеется но при подключении к WordPress.com. пишет такую ошибку:
    Подробности ошибки: The Jetpack server was unable to communicate with
    your site http://old-wpixel.ru [IXR -32300: transport error:
    http_request_failed Couldn’t resolve host ‘old-wpixel.ru’]
    Может из за того что сайт на локальном сервере стоит?

    Может из за того что сайт на локальном сервере стоит?

    Именно. Для подключения к WordPress.com Jetpack должен быть активен на доступном сайте. Локально Jetpack работает только в режиме отладки, где отключены большинство из модулей.

    Очень лаконичный сайт без излишеств. Одна корректировка. Иконки социальных сетей для логина под полем для комментария не совсем уместны поскольку после их нажатия исчезает текст самого комментария, который написан походу раньше. Я как опытный пользователь комментарий сохранил прежде чем залогиниться и потом вставил, но кое-кто может из-за этого расстроиться.) Было бы уместно расположить их над полем для написания комментария и подписать «Прежде чем написать комментарий авторизуйтесь». Ну и поделится кодом с вашим покорным слугой если не жалко.)

    Спасибо Евгений! После написания комментария и входа с помощью соц. сетей, ваш комментарий остаётся на месте, странно если у вас он затирается, возможно глюк системы комментирования.

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

    Ох и не простая установка у Discus. Setup в консоли WordPress не принимает установленные логин и пароль. Так что пока не совсем понимаю как это будет выглядеть.

    Евгений, вам нужно зарегистрироваться на Disqus.com и вводить логин и пароль от вашего аккаунта Disqus.

    Я зарегистрировался в Discus ещё до того, как написал об этом в предыдущем сообщении, но логин и пароль, с которыми я вхожу в Discus не принимается для настройки плагина Discus в WordPress.

    Вам необходимо зарегистрировать именно сайт как площадку, а не просто логин и пароль. Если у вас не получится, напишите нам письмо ([email protected]) и мы постараемся вам помочь!

    Поборол.) Напутал с Jetpack, но поборол. Спасибо. Удобная красивая штука.

    Если вам нужно выйти с сайта, вы всегда можете сделать это через верхнюю панель (администрирования), очистить все куки в браузере или воспользоваться режимом «инкогнито».

    Редактирование CSS при помощи JetPack.
    Как относиться к тому, что «внешний вид > редактор» и «редактирование css» выглядят по разному? И главное, что же нужно написать в этом пустом поле (кроме …@import…) чтобы, например, изменить фон body, цвет шрифта, цвета ссылок, вставить логотип в заголовок и т.д. どうもありがとう

    Евгений, «Внешний вид → Редактор» это встроенный редактор файлов тем WordPress — справа доступные файлы, слева содержимое выбранного файла. Если вы хотите отредактировать CSS, этим редактором мы советуем не пользоваться.

    «Внешний вид → Редактирование CSS» это редактор CSS из плагина Jetpack, правила в этом редакторе встают поверх тех, что в вашей теме, и при обновлении темы они не теряются. Например:

    body <
    background: red;
    font-size: 20px;
    >

    a, a:hover, a:active, a:visited <
    color: yellow;
    >

    И так далее. Вам потребуются базовые навыки языка CSS для того, чтобы понимать какими селекторами пользоваться, а такие средства как Firebug для Firefox или средства разработчика в Chrome вам помогут быстрее найти и изменить нужные элементы. Вставить логотип можно с помощью атрибута background-image .

    Возможно ли отключить некоторые функции Jetpack , например «Мобильная тема» (в Twenty Twelve она итак есть)?

    Конечно, зайдите в Консоль → Jetpack. Найдите модуль, который вы хотите отключить, нажмите кнопку «Узнать» а затем «Деактивировать».

    Совсем недавно я тоже ломал голову на тем как изменить некоторые нюансы своей темы (размер, шрифт, цвет отдельных разделов темы и т.д.) Мучался в переводе на русский язык некоторые слова в интерфейсе темы — типа «комментировать» вместо «comment» и т.д.

    Но, как говорится, век живи-век учись! Недавно ко мне за помощью в подборе темы обратился знакомый, начинающий создавать свой блог WP. Стараясь помочь ему я наткнулся на одну тему, которую без долгих раздумий установил и на свои блоги. Эта тема мгновенно решила все мои проблемы. Во-первых она, её настройки и даже подсказки к настройкам — полностью на русском языке. Во-вторых эта тема позволяет регулировать и настраивать всё и вся! Ширину основного содержимого и ширину полосы виджетов. Цвет (или картинку) общего фона и цвет фона содержимого. Страницу можно сделать в две, три полосы или вообще без полос. Регулируется размер, тип и цвет шрифтов к каждой части страницы, размер, цвет заголовка и вставка своего банера или логотипа. Можно включить-выключить страницу презентаций со слайдером и банерами и многое, многое другое….

    Короче говоря, имея такую тему можно не вдаваться в хитрости и тонкости редактирования CSS.

    В-третьих, и это главное — это так называемая «резиновая» тема, которая автоматически подгоняет сама себя для просмотра на мониторах всех типов (4:3 или 16:9) в том числе и на мобильных девайсах. Одинаково оптимально эта тема смотрится во всех основных браузерах.

    Эта тема называется mantra. Пользуйтесь. И будет вам счастье без знания CSS!

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

    Опыт «общения» с WP научил работе с редактированием CSS и PHP, хотя именно на базовом уровне. Так что в случае чего смогу разобраться в элементарном.

    Что касается «фишек» темы mantra — всё верно. Вряд ли они будут поддерживаться в других темах. Но по этому поводу у меня есть другое мнение:
    Свой первый блог я создал 1,5 года назад и это было моё первое знакомство с WP . Вскоре появился и второй, а потом и третий блог. И надо отметить, что на протяжении всего этого времени я занимался скорее не ведением блогов, а их «обустройством» — без конца менял темы, эксперементировал с плагинами и т.д. Не знаю сколько бы этот процесс ещё продолжался, если бы я не встретил тему mantra.Сегодня я совершенно точно уверен, что дальнейшие поиски других тем и эксперименты с ними для меня не имеют смысла. Mantra — идеальный вариант. Даже если мне когда либо захочется поменять тему, освежить, так сказать блоги, то с помощью этой темы их можно изменить кардинально, как будто поставил новую тему! Так что пока я думаю так.

    Да и потом тема безупречно работает со всеми моими плагинами (чего нельзя было сказать о предыдущих темах) и чувствуется. что тема не заброшена авторами — она установлена у меня три недели и за это время было три её обновления.

    Несмотря на добавление DISQUS, который заменил общие комментарии, в теме Twenty Twelve внутри поста осталась НЕработающая ссылка «Добавить комментарий». Как от неё избавиться?

    В других темах такая же проблема. (я в двух темах проверял) То есть при клике на «комментировать» или т.п. просто открывается запись, но не её нижняя часть, где находится раздел комментирования.

    Но проблема ли это!
    Мне кажется это не столь принципиально. А учитывая все преимущества, которые даёт DISQUS на это вообще можно глаза закрыть! В конце концов разве трудно чуть прокрутить колесо мыши, чтобы добраться до комментариев?

    Если «закрыть глаза», то можно вообще ничего не видеть. Я считаю неправильным то, что на моём сайте что-то не работает, и важным то, что это нужно исправить. #disqus

    Согласен. Проблема в том, что большинство тем для WordPress используют «анкор» с названием «respond» в ссылках типа «оставить комментарий, а в Disqus этот анкор не используется. Можно попробовать добавить в тему скрытую ссылку с таким же анкором после вывода всех комментариев — это как раз и будет приблизительно то место, где будет форма для комментария.

    Может мой вопрос не в тему. Но не знаю куда его задать. Проблема вот в чем. Как известно каждая страница, запись в WP и т.д. имеет свой ID А вот какой ID имеет (и имеет ли вообще) главная страница (страница записей) блога WP ?

    Нет, главная страница (список последних записей) не имеет ID, ровно так же как и страницы архивов, поиска и т.д., но подобные страницы легко определить с помощью функций is_front_page(), is_home(), is_search(), is_archive() и прочие.

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

    Спасибо за совет, но «мы пошли другим путем» — нашёл другой плагин. Кстати! Как известно с версии WP 2,5 непонятно почему перестали указываться ID страниц, записей, ссылок и т.д. Раньше я как то не обращал на это внимания, но вот потребовалось узнать эти ID. Пришлось поломать голову! Но оказывается есть плагин, который возвращает ID туда, где им положено быть. Это плагин «Reveal IDs». Может кому пригодится! Плагин не имеет настроек и его достаточно только установить и активировать.

    ID любой страницы или записи можно узнать, просто посмотрев в адресную строку браузера при её редактировании.

    Речь тут шла немного не об этом. Тем более,, как говорится, «проехали».

    P/S. Id страницы или записи в адресной строке просмотреть можно, но это не всегда это удобно. С плагином лучше!

    Ещё вопрос от «чайника». Любую запись можно «прилепить» на главную страницу и она всегда будет первой. Но кто знает, как можно сделать так, чтобы эта «прилепленная» запись на странице была развёрнутой? — то есть чтобы не надо было нажимать ссылку «Читать далее». Может плагин какой-нибудь для этого есть, или в код страницы надо что то добавить? (Советы типа «Поменяй тему» не предлагать!)

    Плагина подобного не встречал, но с помощью функции is_sticky() вы можете определить прилеплена ли текущая запись, а там уже сами выбирайте the_content() или the_excerpt().

    Но в каком файле делать эти изменения!?

    Зависит от темы, вероятнее всего index.php, front-page.php или home.php, если речь идет о главной странице.

    Добрый день! Я хочу поменять цвет фона и шрифта на своем сайте. Как это можно сделать без проблем для сайта?

    Самый простой и доступный вариант сделать это — поставить тему которые позволяют «играть» с цветами и шрифтами как угодно. Кроме того такие темы на русском языке и не требуют знания CSS PHP и НТML Это например темы mantra (о ней я уже упоминал здесь) и parabola Найдите и установите эти темы. Протестируйте их применительно к своему сайту и вы будете приятно удивлены простотой решения вопроса, который задаете.

    Спасибо за ответ.
    Но, дело в том, что мой сайт имеет большой объем))))И править много нет желания. Мне бы только фон и, естественно, цвет шрифта.
    Я вчера пробовала ставить новую тему…Как то не удачно…

    У меня тоже ОЧЕНЬ большой блог с о множеством фото и прочих наворотов . Применив тему мантра мне практически не пришлось ничего править! Это адаптивная «резиновая тема». Таких тем к сожалению немного. Тем более на русском. Попробуйте mantra или parabola и вы будете ПРИЯТНО УДИВЛЕНЫ!

    Ментра мне показалась темноватой, а параболы я просто не нашла….

    Блин! Так я потому и рекомендовал эту тему что там настраивается абсолютно все. В том числе цвета фона содержимого шриытов и т.д.

    Елена, вы можете сделать это одним из способов, который мы описали в этой статье. «Проблем» для сайта никаких не возникнет, а любые изменения вы сможете легко убрать. Изменить цвет шрифта (например сделать его красным) вы можете с помощью следующего CSS кода:

    #content, #content p, #content ul, #content ol <
    color: red;
    >

    А изменить фон вы можете в разделе Внешний вид — Фон в вашей админ-панели. Если у вас такого пункта меню нет, то ваша тема не поддерживает поизвольный фон. Фон вы можете задать так же с помощью CSS:

    body <
    background: blue;
    >

    Добрый день! Помогите, пожалуйста. Мне нужно в Twenty twelve ссылку Добавить комментарий поместить после поста. К сожалению, CSS не знаю… Копалась целый вечер, ничего не получилось. Можете дать образец кода для редактирования? Заранее спасибо.

    Алла, готового кода для вашего случая к сожалению у нас нет, но с вашим вопросом лучше обратиться на форум поддержки WordPress.org.

    Помогите, у меня не редактируется styles.css из админки. захожу «внешний вид — редактор», выбираю стилевой файл, но он открывается пустым. по фтп все редактируется, но это не удобно для меня.

    У меня тоже самое «получилось» сегодня. Как исправить?

    Игорь, см. комментарий выше.

    Вероятно проблема в том, как организована ваша тема. Попробуйте проделать то же самое, только со стандартной темой Twenty Twelve. Если не получится дайте знать!

    Аня, была та же проблема. Исправил тем, что удалил все закомментированные строки из файла css (думаю потому что они написаны кириллицей), хотя кодировка utf8, бом убирал, то же самое.

    Редактирую css и все остальное с помощью WP IDE

    хуепиздидируеш ты а не редактиреш

    Да, отличный плагин! Очень удобно им пользоваться. Правда иногда плагин Emmet конфликтует и не работает.

    Привет, отличный материал, спасибо огромное! Вы писали: «Кроме таблицы стилей, дочерние темы могут изменять и другие файлы шаблонов в WordPress, но это выходит за рамки данной статьи.»

    Если ли статья где подробно говориться о том как менять другие файлы? Спасибо!

    К сожалению подробной статьи об этом мы пока не писали.

    Мехман, посмотрите нашу статью про дочерние темы.

    А никто не подскажет, где подключается Style.css?

    Как правило файл style.css подключается в файле functions.php с помощью функции wp_enqueue_style() .

    Привет, Константин! Может подскажешь где описывается оптимальная структура файла css? Что за чем идет? классы, идентификаторы и т.п.?

    Оптимальнее писать так, как вам удобнее будет читать 🙂

    Константин, подскажите пожалуйста такой момент:
    Я добавил в TinyMce свои собственные стили и они работают.
    НО раньше, в версиях до 3.3 по-моему, допустим если цвет фона span’a был синим, то он был синим не только для текста в редакторе, но и для моего пункта меню в выпадающем списке.
    Т.е. весь стиль перекочевал в пункт выпадающего меню.
    А после обновлений происходит следующее — допусти размер шрифта, если он 24, то и изображается в выпадающем списке 24, но цвет фона остается белым. Т.е. сам пункт меню должен являтся примером данного стиля, но этого к сожалению не происходит.
    Подскажите как это решить?

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

    Это происходит в админпанели, а не на сайте.

    Вот смотрите — формат «Специальный 1»

    В окне редактора — красный шрифт и синий фон, большой размер текста.

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

    Понял. Да, это изменение произошло во внешней библиотеке TinyMCE, откатить саму библиотеку на предыдущую версию к сожалению не получится.

    Спасибо за отличные статьи

    Помогите, пожалуйста уже несколько дней бьюсь, ничего не получается, просто не совсем понимаю, видимо: установил тему NIRVANA все настроил как хотел, потом выясняется, что мои изменения не сохраняются, главным образом шрифты, и рекламы от Гугл не показывает. Облазил все, на сайте разработчика тоже читал, они советуют воткнуть в настройках темы свой код css или Custom CSS, пробовал создавать дочернюю тему как у вас описано и править там CSS, но тоже ничего не получается — просто заменил везде шрифт. Jetpack подключить не получается — какие то ошибки. Объясните пожалуйста, как мне правильно создать этот свой код CSS (Custom CSS) — я должен взять style.css от родительской темы и править его?

    Добрый день. Подскажите пожалуйста. Вношу изменения в css файл, все отлично отображается в Хроме, но в Мозилле изменения не видны. Опера тоже изменения видит. С чем связано, что Мозилла не видит изменения. Когда проверяю в Мозилле код через F12 он в сss выдает какие-то ошибки. Проблема в браузере? хотя с др компьютеров тоже не видит этот код. Или все таки в коде ошибки.

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

    Вставляю в шапку сайта номер. Но когда задаю параметры в css он ни как не хочет реагировать. я уже не знаю что делать. вроде это задача проще некуда. вставить див и задать параметры. но почему текст совершенно не меняется… я не знаю что делать ПОМОГИТЕ!

    Ты пользуешься стандартным редактором, он ужасный. Установи Page Builder и проблема будет снята.

    Привет! Есть ли пользовательские CSS, которые позволяют изменять ширину конкретной страницы по её ID?

    Добрый день! Я в css новичок, и у меня такой вопрос. Как сделать что-бы слайдер был под верхним меню, что-бы меню было с прозрачным фоном, и что-бы при прокрутке сайта вниз, меню не пряталось, что-бы был эффект как у темы Agama? Работаю с темой Twenty Sixteen

    Раз в неделю, только все самое новое про WordPress и никакого спама!

    Поиск по сайту

    Бесплатная книга

    Как защитить свой сайт от хакеров? Читайте в нашей электронной книге.

    Вакансии

    • WordPress разработчик в компанию Grooni
    • Web-разработчик со знанием WordPress в Pravmir.ru
    • Ведущий WordPress-программист в компанию UpSolution
    • WordPress-ниндзя в команду Pressjitsu
    • WordPress разработчик в компанию Automattic

    Ищете крутую тему для WordPress? Попробуйте Maker от ThemePatio:

    Как правильно подключать CSS стили и JS скрипты в тему WordPress

    Эта короткая заметка, которая будет полезна тем кто начинает создавать темы на WordPress. Или возможно вы занимаетесь этим уже некоторое время, и делаете это не на 100% эффективно. Сегодня мы рассмотрим как правильно и корректно подключить CSS стили и JS скрипты к своей теме.

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

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

    Правильный способ подключения css стилей и js скриптов в тему WordPress

    Корректнее делать подключение специальными PHP функциями, внутр файла functions.php вашей темы. Рассмотрим в качестве примера, то как это организовано в официальной теме twentytwelve для WordPress.

    Финальный код подключения стилей и скриптов будет в конце статьи. А пока разберем все по частям.

    Выглядит это следующим образом, есть функция twentytwelve_scripts_styles , ее название может быть любой. Внутри которой мы будем подключать CSS стили и JS скрипты. После ого как эта функция объявлена, мы вызываем ее через add_action

    Аналогичная конструкция скорее всего уже присутствует в вашем шаблоне, если вы взяли за основу готовую WordPress тему.

    Теперь нам остается только подключить наши CSS и JS, в данном случае внутри функции twentytwelve_scripts_styles()

    Рассмотрим пример подключения стилей.

    Подключаем CSS стили в теме WordPress

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

    Регистрация происходит функцией wp_register_style(); в которую передаются 4-ре параметра:

    1. Имя стиля, которое в дальнейшем будем использовать при подключении данного стиля. Имя придумываем самостоятельно.
    2. Путь к CSS файлу. В примере выше он содержит переменную для определения пути каталога с темой.
    3. Массив с перечислением зависимостей. Например мы подключаем reset.css для сброса стилей, и все остальные CSS файлы должны быть подключены после него. Соответственно при подключения файла style.css мы поставим ему зависимость от файла у него будет зависимость от файла reset.min.css которому мы дали имя my_reset и поэтому параметр с зависимостями будет выглядеть вот так array(‘my_reset’)
    4. Четвертый параметр — версия файла. Параметр необязательный.
    5. Пятый — тип устройства для которого должен быть применен данный стиль. В нашем случае это ‘screen’

    После регистрации подключаем зарегистрированные файлы стилей функцией wp_enqueue_style( ‘style_name’); в которую передаем один параметр — имя зарегистрированного стиля.

    Можно делать подключение файла сразу через функцию wp_enqueue_style(); передав в нее те же параметры которые мы передаем в функцию wp_register_style(); при регистрации стилей.

    Подключаем JS скрипты в теме WordPress

    Аналогично стилям, JS скрипты сначала регистрируются, и затем подключаются.

    Либо их можно сразу подключить, записав все необходимые параметры в wp_enqueue_script(); функцию.

    Готовый пример подключения CSS и JS файлов в файле function.php в теме WordPress

    Привожу итоговый рабочий пример подключения CSS и JS файлов в шаблоне WordPress в файле functions.php

    Как я уже писал выше, плюс такого подключения в том, что теперь CSS и JS файлы будут корректно определятся и обрабатываться плагинами в WordPress. Например плагином для кэширования и минификации стилей и скриптов.

    Подключив скрипты образом как указано выше и установив плагин WP Rocket я получил ощутимый прирост в скорости работы сайта. Чего не было ранее, когда стили и скрипты подключались в HTML коде.

    Создание сайта на WordPress

    Что как и почему в WordPress

    Встраивание стилей и правила CSS

    В этой статье приведена краткая справка по встраиванию стилей и некоторые несложные примеры задания CSS-стилей, а также полезные ссылки. Содержание:
    Способы встраивания стилей в документ | Импорт в .css-файле |
    Селекторы | Псевдоклассы | Группировка | Приоритет |
    Внедрение шрифтов | JavaScript (expression)

    Способы встраивания стилей в документ

    В WordPress стили элементов страниц должны задаваться в отдельных файлах с расширением .css, т.к. WordPress-сайт строится на документах, написанных на языке сценариев XHTML. (Основной файл стилей темы WordPress — это файл style.css в папке темы.) Поэтому в WordPress можно использовать два способа связывания HTML-страниц с таблицей стилей:
    1. Связывание с помощью тега link позволяет хранить таблицу (список) стилей в отдельном файле и использовать ее для разных HTML-страниц. href задает путь к файлу стилей. Если документ и файл стилей style.css находятся в одной папке, можно написать:

    2. Импортирование позволяет использовать внешнюю таблицу стилей, указав ее url-адрес:

    *** Теги link и style должны находиться в разделе документа head.
    Два следующих способа, предусматривающих задание стилей внутри самого документа, в WordPress не используются.
    3. Внедрение — это задание таблицы стилей в самом документе в разделе документа head. Стили записываются по тем же правилам (см. ниже), что и в отдельном файле. Список правил стилей располагается внутри тега style:

    *** Поскольку этот тег может не поддерживаться какими-то браузерами (старыми версиями браузеров), его содержимое помещается в тег комментария
    4. Встраивание позволяет изменять форматирование конкретных элементов страницы внутри раздела документа body:

    Еще раз все вместе:

    Импорт в .css-файле

    Инструкции импорта таблиц стилей должны находиться в начале .css-файла. После инструкции обязательно ставится точка с запятой ;, а url() можно опустить

    Больший приоритет имеют последующие описания стилей внутри .css-файла.

    А теперь правила задания стилей в CSS-файле:

    Селекторы

    Тег

    id (идентификатор — уникальное имя)

    class (класс)

    Маска *

    ! Использование этого селектора может замедлять отображение веб-страницы

    Контекстные селекторы

    Вложенные элементы наследуют некоторые свойства, например:

    Псевдоклассы

    Псевдоклассы и псевдоэлементы используются для изменения поведения при некоторых условиях. Самые известные и поддерживаемые — это

    Псевдоклассы ссылок

    Группировка

    Свойства margin (поля) и padding (отступы или «внутренние» поля)

    Поля и отступы задаются аналогично:

    *** В краткой записи размеры указываются в порядке вверху, справа, внизу, слева
    (обход по часовой стрелке, начиная с верхнего поля).

    Автоматическое задание полей слева и справа

    Свойства font (шрифт)

    Группировка селекторов

    Селекторы можно группировать, перечисляя через запятую

    Приоритет

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

    Если в .css -файле задан некоторый стиль, но вместо него применяется другой стиль, следует назначить для нужного стиля более высокий приоритет, например:

    Внедрение шрифтов

    ! Фотмат шрифта зависит от браузера. Например, для Internet Explorer нужен формат EOT, а формат TTF подходит для браузеров Firefox (начиная с 3.5), Safari (начиная с 3.2), Opera (начиная с 10) и Chrome (с января 2010 г.).

    Поэтому использовать можно так:

    *** src: local(«myFont«) — имя шрифта, установленного на локальном компьютере
    Подробнее: [ref url=»//www.xiper.net/collect/html-and-css-tricks/typographics/font-face-non-standart-fonts-on-css.html» text=»1″] , [ref url=»//vremenno.net/html-css/cross-browser-font-face/» text=»2″]

    JavaScript

    Вычисление ширины бокса

    Ширину можно указать точным числом, в процентах и . вычислить (работает в IE):

    document.body.offsetWidth — это текущая ширина бокса страницы, а 44 — это сумма всех значений margin+padding+border с двух сторон бокса.

    Для вычисления ширины произвольного бокса используется его id (например, «box1»): box1.offsetWidth. (см. Практический JS: оптимизируем CSS expressions)

    Почитать еще о CSS:

    • [ref url=»//www.w3.org/TR/CSS21/cover.html#minitoc» text=»Документация»]
    • [ref url=»//softwaremaniacs.org/blog/category/primer/» text=»Учебник» ]

    Встраивание стилей и правила CSS : 2 комментария

    Спасибо за статью.
    Подскажите пожалуйста как решить проблему:
    внедряю поисковик с другого сайта способом 1. Связывание, все отображается, только поисковик сделан таким образом, что при поиске выдает только 10 наименований, а на самом деле их больше. Страницу при этом разбивает еще на несколько (в зависимости от того сколько позиций найдено), но WP не отображает их содержимое. Подскажите пожалуйста, как решить?
    Если в настройка покопаться и поставить отображение записей больше 10 — не лечит.
    (нажать поиск)

    Топ-пост этого месяца:  Заменяем якорь (хэш) #comments на другой
    Добавить комментарий