Здравствуйте читатели. Недавно меня попросили объяснить как настроить таблицу стилей на WordPress. И я решил описать ключевые навыки. Что такое таблица стилей я объяснять не буду наверно все знаете. Если не знаете то вам для начало нужно посетить «Яшу» или «Гошу».
Любой современный сайт не может работать без этой таблицы. Если может то он примет убогий вид. Как например первые сайты которые писались на.html.
Для WordPress полно готовых шаблонов сотни вариантов. Выбирай и делай только. Однако у всех веб мастеров существует проблема его изменить. Делать доработки удалять ненужные поля, уменьшить шрифт, расстояние между строк, отступы и тд. Все эти многочисленные операции можно сделать редактируя один лишь файл. Ну на разных шаблонах их может быть больше.
И так приступим.
Находим файл стилей.
Файл стилей вы можете зайти двумя способами либо напрямую через сервер, либо через консоль. Я обычно пользуюсь консоли, удобно и быстро.
Внешний вид — редактор
Здесь вы увидите список всех фалов сайта. Нужно выбрать самом внизу нужный файл для настройки и редактирования style.css WordPress
На втором рисунке показано сама таблица стилей в формате.css обычно принято называть этот файл style.css
И так мы определились с файлом. И мы будем редактировать его. Перед тем как начнете редактировать что-то, менять советую скопировать этот файл в оригинале на свой компьютер.
Настройка, редактирование css
Для настройки таблицу стилей применяют специальные программы чтобы облегчить свою жизнь. Но в моем случае все проще и нечего не нужно.
Я юзаю Google Chrome. Пожалуй по мне самый лучший браузер. И я при редактировании таблицу стилей пользуюсь именно с ним. Но можно пользоваться и с Opera.
Для чего я все это говорю? НАс интересует функция правой кнопкой мыши по сайту. Точнее в нужную нам область. Щелкая правой кнопкой выходит функция «Просмотр кода элемента»
При этом элемент выделяется и снизу появляется его код. А с права появляется то что нам нужно. Значения из таблицы стилей которые относятся к выделенному элементу.
Здесь мы видим все элементы выделенного элемента. Серое выделение это отступы. Из значений видно что padding составляет 15px с верху и 14px с боку.
Если нам нужно изменить это значение мы можем их изменить прямо на месте. и посмотреть как будет выглядит уже сейчас. Если вы подобрали нужный размер сейчас вам нужно это значение найти и изменить на самом таблице стилей.
Как мы это делаем? НА рисунке я подчеркнул красными линиями. .nav > li > a -это именно тот элемент в котором находиться padding : 15px 14px ; Нам нужно эту строку найти в таблице стилей. Вам даже есть подсказка style.css:520 это значит она находиться в файле style.css и строка номер 520.
Приведу еще пример:
Будем менять цвет.
Нажимаем правой кнопкой мыши в нужную нам область и смотрим код.
Мы видим что этот одел покрашен в синий цвет. background
: #3b8dbd
; Мы для теста прямо на месте можем изменить цвет. После чего как подобрали нужный цвет ищем.s1 .sidebar-toggle в таблице стилей и находим.
Здесь видно background : #3b8dbd ; это и есть наш цвет в ввиде кода. нам нужно будет просто изменить его на наш цвет и сохранить изменения.
На этом пока все. Теперь вы можете изменять любые элементы. Если у вас возникнет сложности я могу продемонстрировать и редактирование других областей. Смотрите продолжение статьи.
*Подключить визуальный редактор можно в разделе консоли «Плагины».
Плагин TinyMCE Advanced добавляет к стандартному редактору дополнительные кнопки для форматирования текста. Вот некоторые из них:
- Размер шрифта
- Тип шрифта
- Цвет фона
- Функция поиска и замены текста на странице
Также можно отключить автоматическое удаление пустых строк.
Вы можете добавить или удалить кнопки настроек с панели инструментов, а также разместить их в удобном для вас порядке.
Настройки редактора находятся в разделе консоли «Настройки» — «TinyMCE Advanced».
Настройки плагина
Настройки плагина находятся в «Настройках — TinyMCE Advanced». Не бойтесь того, что плагин не переведен на русский язык – сами кнопки в визуальном редакторе TinyMCE почти все переведены на русский, так что знание английского вам не понадобится. Да и настроек тут кот наплакал — по сути, вам лишь мышкой надо перетащить нужные кнопки на панель инструментов визуального редактора. Да и это не является обязательным – почти все продублировано в меню редактора:
Меню, кстати, можно отключить первой же настройкой плагина:
Сами кнопки на английском языке, но понять, что они означают несложно:
Как вы видите – в настройках плагина все на английском языке, а вот при редактировании записи все английские надписи автоматически переводятся на русский язык. Даже если вам что-то непонятно – кинули кнопку на панель, сохранили настройки, переключились на редактирование записи и посмотрели, что означает та или иная кнопка.
Не стоит добавлять все возможные кнопки на панели инструментов, так как многие кнопки вам никогда не понадобятся. Более того, лучше удалить некоторые кнопки из тех, которые там уже есть. Чем проще редактор – тем удобнее и эффективнее им пользоваться.
Кнопка «Найти и заменить» вызывает вот такой диалог:
Возможность выбрать шрифт и его размер:
Тоже весьма полезная функция, позволяющая без редактирования стилей шаблона оформить текст вашей статьи так, как вам это нравится.
Так же есть функция «просмотра блоков»:
Она позволяет визуально оценить, как оформлен ваш текст. Важно это тем, что зачастую в визуальном редакторе очень сложно понять, как оформлен тот или иной кусок текста. Или откуда в каком-то куске текста берутся лишние отступы:
В редакторе WordPress теги абзацев и переносов строк расставляются автоматически и вы их вообще не видите. Любой текст, после которого вы нажали на «Enter» берется в теги абзацев, которые вы не сможете увидеть, даже переключившись на вкладку «Текст» визуального редактора.
Иногда такое поведение редактора вызывает полный ступор. К примеру, на данном скриншоте видно, что текст, взятый в теги
автоматически оказался еще завернут и в теги абзацаК слову, плагин TinyMCE Advanced дает возможность увидеть настоящий исходный код вашего текста, без вырезанных тегов. Для этого в меню «Инструменты» выберите пункт меню «Исходный код»:
Эта функция позволит вам увидеть реальный исходный код вашей статьи, а не тот, который вы видите, переключившись на вкладку «Текст». Вот, например, на вкладке «Текст» код может быть таким:
А при использовании функции «Исходный код» вы увидите:
То есть вы увидите свой текст с уже расставленными тегами абзацев. И это будет именно такой код, который будет выведен у вас в опубликованной записи на сайте.
Плагин также расширяет возможности вставки стандартных списков. В редакторе по умолчанию есть лишь один вид списков:
Плагин дает возможность вставить списки различных видов:
Кнопка вставки смайликов:
Забавная кнопка, которая позволяет оценить, как будет выглядеть смайлик в опубликованной записи, так как в визуальном редакторе смайлики все равно будут выводиться в текстовом виде. Не забудьте только зайти в «Настройки\Написание» и поставить галку на опции «Преобразовывать смайлики наподобие 🙂 и 😛 в картинки».
Теперь стоит упомянуть о настройках, которые находятся ниже панели выбора неиспользованных кнопок:
По умолчанию включена лишь опция «List Style Options «, включающая расширенные возможности вставки списков, о которых написано выше. Опция «Context Menu » включает контекстное меню плагина, вызываемое при нажатии правой кнопки мышки в редакторе:
Опция «Link (replaces the Insert/Edit Link dialog) » касается диалога вставки ссылок. По умолчанию этот диалог выглядит так:
Плагин может заменить его на такой:
То есть, по сути, диалог плагина позволяет лишь прописать rel=»nofollow» для ссылок, а все остальное есть и в стандартном диалоге добавления ссылок. Нужна ли вам эта функция плагина или нет, решайте сами.
Последняя часть настроек плагина это «продвинутые» настройки:
Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu — данная функция на Prihod.ru не поддерживается.
Stop removing the
And
tags when saving and show them in the Text editor — Самая последняя настройка плагина заставляет редактор показывать теги абзаца и переноса строк на вкладке «Текст». То есть при редактировании записи все будет по-прежнему, а вот на вкладке «Текст» вы увидите полную html-разметку. Впрочем, редактор по-прежнему будет чудить со своим авто-форматированием. Например, вот такой код:
После переключения на «Визуально» и обратно на «Текст» превратится в:
То есть редактор удалил один перенос строки, взяв оставшиеся два переноса в теги абзаца. Но после сохранения страницы все
пропадут.Но при включении этой настройки WordPress перестает «съедать» пустые строки, которые вы ставите кнопкой Enter в режиме визуального редактирования. Редактор на месте пустой строки вставляет код
и не удаляет его при сохранении, даже если таких строк на странице много.Статья взята отсюда и немного дополнена 🙂
Просмотрено (4481) раз
Мы разместили на странице компонент Компонент - специальный элемент системы, предназначенный для вывода информации из Базы данных сайта.
Шаблон компонента
Параметр Шаблон компонента отвечает за внешний вид. У большинства компонентов только один шаблон по умолчанию (.default ).
Если шаблонов несколько - выберите нужный в выпадающем списке. Учтите, что при смене шаблона изменится внешний вид создаваемой страницы.
Основные параметры и Источник данных
Здесь мы задаем источник публикуемых данных (инфоблок, форумы, веб-форма, опрос и т.д.):
В некоторых случаях источник следует задавать с помощью кода, в котором передается идентификатор элемента данных (однако это редко входит в обязанности в контент-менеджера).
Тут же следует задать параметры сортировки (по какому признаку и как сортируются данные), например:
Шаблоны ссылок
Здесь мы производим настройку адресов страниц (обратитесь к администратору за дополнительной информации):
Управление адресами страниц
Тут мы выполняем настройку режима ЧПУ ЧПУ - это веб-адрес, удобный для восприятия человеком. Это аббревиатура от словосочетания «человеко-понятный урл» (где «урл» - жаргонное обозначение URL).
Управление режимом AJAX AJAX - технология обращения к серверу без перезагрузки страницы.
Здесь мы настраиваем AJAX в компоненте. Технология AJAX обновляет (загружает) не всю страницу, а только некоторую ее часть после действий пользователя (например, при нажатии на кнопку). Таким образом, пользователь быстрее увидит результат своих действий.
Настройки кеширования
Тут мы определяем поведения кеша Кеш - это некое хранилище для ускорения просмотра информации на сайте. Когда пользователь просматривает информацию на сайте, то она не всегда запрашивается из базы данных, а берется из кеша. для компонента:
Кеширование используют для уменьшения нагрузки на сервер и ускорения отображения данных. Время кеширования зависит, в основном, от частоты обновления информации: чем реже обновляется информация, тем больше может быть время кеширования. Будьте аккуратны, производите настройки кеша только в согласовании с администратором сайта.
Дополнительные настройки
Здесь определяются дополнительные параметры - навигационная цепочка, заголовки страниц, форматы показа даты и т.п.:
Для чего нужны остальные пункты всплывающего меню? Давайте разберемся.
Помимо команды редактирования мы видим список компонентов, которые использованы в интересующей нас области. Для каждого компонента видим три команды:
- Копировать шаблон;
- Редактировать шаблон;
- Отключить компонент.
Первые две команды используют для работы с шаблоном, чаще всего это задача администратора сайта. А вот команда Отключить компонент может помочь контент-менеджеру. Эта опция делает компонент неактивным. Данные из этого компонента не будут показаны на странице, пока вы не включите его вновь Место расположения компонента при включённом режиме правки обозначится квадратом с красной
точкой. Для включения компонента выполните обратные действия:
.
В этом непростом уроке мы разобрались с настройкой компонентов. Стоит отметить, что набор параметров у каждого компонента свой. Для подробной информации по компоненту и его параметрам обращайтесь в . В следующем уроке мы закрепим полученные знания с помощью реальных примеров использования компонентов.
