Настройка новой темы wordpress. Редактирование шаблона WordPress: как изменить тему под себя? Модифицикация CSS темы

Однако такой подход имеет существенный недостаток. При следующем обновлении темы все настройки часто просто «слетают», так как обновление темы перезаписывает файлы таблицы стилей по новому.

В WordPress существует относительно простой механизм, позволяющий избежать этого недостатка — дочерные темы (Child Theme)

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

Почему надо использовать дочерную тему?

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

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

Как создать дочерную тему Вордпресс

Способ 1. С подключением стилей через правило @import

Для создания дочерной темы достаточно создать файл стилей style.css и подключить к нему стили родительской темы с помощью правила @import.
В качестве примера, я создам дочерную тему для темы Twenty Twelve, входящей в «базовый комплект поставки» WordPress. Перво-наперво, у себя на компьютере я создаю новую папку для дочерной темы. Назову ее: / twentytwelve-child/.
В этой папке я создаю файл с именем style.css и заполняю файл информацией, как показано ниже:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://сайт */ @import url("../twentytwelve/style.css"); /* ниже устанавливайте свои настройки элементов темы*/

Строки Theme Name (Имя темы) и Template (шаблон родительской темы) — обязательные, строки Description (Описание), Author (Автор), Author URI (сайт автора) необязательные, и по усмотрению создателя быть им в теме или нет.
Важной частью этого файла являются строка: @import url("../twentytwelve/style.css"); Эта строка идентифицирует родительскую тему и импортирует CSS из нее. Когда ты будешь создавать «дочку» — то должен убедиться, что путь к файлу CSS твоей родительской темы является правильным, и что параметр «Template:» правильно определяет имя твоей родительской темы. Если ты используешь другую тему - настрой соответствующие названия для другой темы.

Обрати внимание — все названия должны быть чувствительны к регистру: название с большой буквы и название с маленькой - это разные названия!

Так как папка моей материнской темы называется «twentytwelve», и она с маленькой буквы, следовательно @import URL учитывает этот фактор.

Способ 2. С подключением стилей кодом в function.php

Во избежания лишних обращений к базе данных, что приводит к увеличение времени отображения страниц, Codex WordPress не рекомндует использовать правило @import для подключения стилей родительской темы

В этом способе для дочерной темы создаеться два файла: в дополнение к style.css в папке дочерной темы нужно создать файл function.php и вставить туда следующий код:

В этом способе запись @import url(‘../twentytwelve/style.css’); в файле style.css дочерной темы совершенно не нужна и файл style.css будет иметь следующий вид:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://сайт*/ /* ниже устанавливайте свои настройки элементов темы*/

Как активировать дочерную тему

После того, как я создал папку дочерной темы и файл style.css в ней, я могу загрузить на сервер и активировать в WordPress вновь созданную дочерную тему. Загрузка и активация дочерней темы ничем не отличается от загрузки и активация обычный темы. Загрузить ее можно через страницу «Внешний Вид» -> «Темы» –> «Добавивть тему» в админпанели WordPress.

Обрати внимание, что перед тем, как загрузить дочерную тему, необходимо сначала создать ZIP-архив ее папки. Это можно сделать с помощью практически любого архиватора.

Да и еще, при активации дочерной темы также убедись, что у тебя в папке тем WordPress загружена родительская тема (в моем примере это тема «Twenty Twelve»).

Модифицикация CSS темы

Теперь я создал дочерную тему для Twenty Twelve и загрузил ее в WordPress. Так как в дочерной теме я импортирую CSS родительской, то при активации дочерная тема будет выглядеть так же, как и родительская. Для настройки своей темы я могу добавить любые изменения в файл CSS дочерной темы ниже строки @import... В этом случае вся новая информация CSS из дочерной темы добавляется после загрузки CSS родительской темы, и потому «дочерная» CSS в выдаче находится ниже CSS из родительской темы, а это значит, что все новые стили CSS будет перезаписывать исходные.
Например, предположим, что в моем примере я хочу изменить заголовок сайта. Сейчас шрифт «жирный» и серый, а я хочу сделать его тоньше и красным. Я могу добавить соответствующую CSS к дочерной теме в файле style.css следующим образом:

/*
* Theme Name: Twenty Twelve Child * Template: twentytwelve Description: Моя дочерная тема для Twentytwelve Author: Александр Коваль Author URI: https://сайт */ @import url("../twentytwelve/style.css");

/* ниже устанавливайте свои настройки элементов темы*/

Site-header h1 a {color: #FF0000; font-weight: 300;}

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

Где скачать и как установить

Установка существует автоматическая установка и ручная.

Автоматическая целиком и полностью осуществляется через админку WP: перейдите в раздел «Внешний вид» — «Темы» и выберете закладку «Добавить новую». Вам сразу предложат на выбор несколько шикарных визуальных шкурок для вашего блога. Если сраз не нашли ничего подходящего, то воспользуйтесь поиском и фильтром характеристик. Нашли подходящую? Жмите «Установить»! Далее возвращайтесь в раздел «Внешний вид» — «Темы» и ищите ее. Остается только нажать на «Активировать» и полюбоваться новым оформлением своего блога.

При установке в ручную необходимо скачать архив с темой с официального сайта WP, распаковать его и полученную папку закинуть на ftp в директорию /wp-content/themes. Лично мне этот способ кажется проще и быстрее. Хотя я и визуальным не пользуюсь — не ищу легкой жизни. Так что в этом деле с меня можете пример не брать. Я ведь могу и плохому научить.

Опять же, остается только Активировать новую шкурку.

Структура темы WordPress

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

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

Текст статей, страниц, создаваемые меню и виджеты определяют содержание страницы, шаблоны темы (php файлы) определяют структуру веб страница, а стили темы (файл style.css и всевозможные дополнительные шрифты и картинки) — графическое представление. Фактически, страница блога собирается как конструктор согласно шаблонам, графически оформляется согласно стилям и заполняется согласно созданному Вами контенту.

Для удобства, я бы разбил все файлы на две группы. Шаблоны первой группы определяют части страницы:

bookmark.php — не всегда присутствует, отвечает за социальные кнопки;
comments-old.php — необязательный шаблон, отвечает за представление старых комментариев;
header.php — определяет самую верхнюю часть исходного кода страницы: все что расположена в теге header и шапку сайта;
sidebar.php — место под меню и видженты;
comments.php — шаблон для комментариев. Обычно подключается только к записям (single.php) и страницам (page.php) (на своем блоге я отключил комментарии для страниц, ибо они служат в большей части для технической и общей информации);
searchform.php — необязательный шаблон, отвечает за форму поиска. Очень часто этот код не выносится в отельный файл;
functions.php — файл со скриптами и функциями темы;
и другие.

Шаблоны второй группы определяют структуру представления страницы в целом и формируются за счет подключения шаблонов первой группы с добавлением области контента:

archive.php — содержание рубрики;
single.php — отдельная запись;
index.php — главная страница;
search.php — результаты поиска;
page.php — созданная страница (не путать с записями);
404.php — страница ошибки 404, открывается при попытки зайти на несуществующую страницу.

Визуально структура шаблона wordpress выглядит так:

Что будет, если отсутствует один из шаблонов второй группы? Его функции возьмет на себя другой из группы. Это называется иерархией шаблонов, и об этом подробно написано в кодексе WordPress . Главное понимать, что шаблоны второй группы мало чем отличаются друг от друга — только контентом и дополнительными подключаемыми плагинами (например, хлебные крошки, социальные кнопки или похожие статьи). Поэтому недостающий файл темы несложно создать самому на основе уже имеющихся. Что из себя должен представлять его контент, можно подсмотреть в соответствующем файле другой темы.

Редактирование шаблона WordPress

1. WordPress имеет встроенный редактор:

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

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

2. Подключитесь к ftp, на котором находится блог. Перейдите в директорию /wp-content/themes/название_темы и откройте нужный шаблон с помощью текстового редактора, установленного на Вашем компьютере. Это несколько дольше, но зато можно использовать редактор с подсветкой синтаксиса кода.

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

Спасибо за внимание!

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

У каждого веб-ресурса есть две стороны, административная панель управления и то, что видят все посетители.

Так вот, чтобы у каждого, кто переходит на ваш блог/портал «радовался глаз» и благодаря этому человек задерживался бы на страницах, необходимо настроить шаблон, сделать его красивым, удобным…

Какие варианты решения данной задачи существуют

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

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

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

Это первый вариант — сделать заказ!

Второй вариант — попробовать самостоятельно.

Как именно это провернуть, я расскажу в сегодняшнем выпуске.

Третий вариант — купить готовый шаблон! Но его тоже можно редактировать и настраивать.

Как настроить тему wordpress

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

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

Как бы то ни было сейчас все разберем.

Как установить шаблон вордпресс из интернета

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

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

http://wp-templates.ru

Перейдите на него, нажмите на кнопку демо под понравившейся темой и посмотрите, как он на вид. Чисто, упал глаз на него или нет. Если да, то смело кликайте по кнопке «Скачать».

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

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

Всё, больше лишних действий не будет. Как можно было заметить, мы работали только со вкладкой «Внешний вид».

Настройка шаблона (темы) wordpress под себя

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

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

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

Например, в недавнем выпуске я рассказывал, . Это не один из стандартных виджетов вордпресса, а сторонний виджет. Чтобы его установить, потребуется воспользоваться виджетом «Текст» и при этом нам нужен скрипт для вставки. В статье, ссылка выше, я про это подробно рассказывал.

Что можно расположить в боковой панели?

У меня в сайдбаре очень небольшой инструментарий. Из вордпрессовских виджетов установлен только «Поиск». А «Интересные выпуски» я прописал от руки.

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

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

Как установить виджет?

Наведите курсор мыши на вкладку «Внешний вид», нажмите на «Виджеты».

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

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

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

как редактировать шаблон WordPress

изменить ширину шаблона на WordPress

как изменить размер шаблона WordPress

как изменить цвет шаблона WordPress

как изменить шрифт в шаблоне WordPress

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

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

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

Для примера давайте попробуем изменить цветовую схему сайта. Зайдем в меню Цвета и изменим фон боковой и центральной частей сайта.

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

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

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

Если это не так, тогда выберите этот файл из списка справа, он называется Таблица стилей (style.css). Чаще всего цвет шрифта задается в body, поэтому найдем стили данного элемента и пропишем красный цвет для в качестве цвета шрифта.

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

Как видим, настройка шаблона WordPress под себя — достаточно несложная задача. Достаточно немного знаний CSS и вы сможете изменить шаблон WordPress и произвести необходимую настройку шаблона. По той же схеме мы можем решить и другие аналогичные задачи. На этом я с вами прощаюсь. Удачи и до новых встреч!

1. Настройка шаблона

1.1. Добавление копии

1.2. Продажи и SEO

1.3. Структура копии

1.4. Аутсорсинг или самостоятельная настройка?

1.5. Добавление контента на сайт

2. Другие страницы

2.1. Добавление и настройка формы контактов

2.2. Добавление Google Maps

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

Чтобы приступить к созданию первой публикации, перейдите в панель управления WordPress/Записи/Добавить новую . Здесь вы увидите множество вариантов для редактирования. Вот некоторые основы создания постов на сайте WordPress:

1. Не используйте заезженные фразы и клише. Будьте оригинальными.

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

3. Не переусердствуйте со знаками препинания.

4. Не переходите на снисходительный тон.

5. Создавайте легко читаемые тексты. Убедитесь, что информация соответствует общей теме:

— Заголовки;

— Подзаголовки;

— Маркеры;

— Нумерованные списки;

— Жирный шрифт;

— Курсив и подчеркивание.

6. Увлекайтесь тем, о чем пишете. Это единственный способ создать осмысленный пост и привлечь внимание читателя.

7. Более чем важны заголовки в тандеме с увлекательным и интересным содержанием.

8. Обращайте внимание на тайтлы.

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

10. Избегайте нецензурных слов и выражений, если они употребляются не в ироническом контексте.

11. Никакой жаргонной лексики быть не должно.

12. Используйте видео/изображения в качестве иллюстраций к текстам.

13. Не бойтесь быть оригинальными.

14. Играйте словами.

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

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

Писать SEO оптимизированные тексты на самом деле намного проще, чем может показаться. Просто придерживайтесь ниже приведенных правил:

Работайте с 1-2 ключевиками в тексте. Те же ключевые слова могут быть использованы в мета-описаниях, заголовках и URL;

Оптимизируйте изображения и используйте альтернативный текст. Важно: в описаниях картинок используйте одно короткое ключевое слово.

Используйте ссылки. Этот момент очень важен. Залинкуйте публикацию с 1-2 уже существующими на сайте постами схожей тематики, которые имеют высокий рейтинг. Также рекомендуется, чтобы ключевые слова были связаны между собой, а каждая ссылка открывалась в новом окне.

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

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

Прежде чем войти в административную панель WordPress своего сайта, выполните следующие действия:

1. В панели инструментов выберите пункт Записи;

2. Нажмите Добавить новую;

3. Заполните все поля, начиная с заголовка;

4. Введите свой текст или скопируйте его в текстовое поле;

6. Когда вы закончите редактировать свой пост, нажмите Опубликовать.

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

Форма контактов является обязательным плагином для любого современного сайта или блога. Наш Cherry Framework включает в себя уже встроенную Contact Form 7. Давайте посмотрим как его можно его настроить.

1. Перейдите к Плагины/Установленные.

2. Вы увидите, что плагин Contact Form 7 уже установлен.

4. Здесь находится форма контактов, созданная по умолчанию. Чтобы настроить ее, нажмите Изменить.

5. Измените название контактной формы и сохраните изменения.

6. В поле Шаблон формы вы можете вставить между тегами.

7. В блоке Письмо вы также можете изменить параметры во всех имеющихся полях.

8. Скопируйте код Контактной формы и вставьте его в свой пост.

Другой плагин, который может быть полезен вашему сайту – Google Map. С его помощью можно показать свой адрес и обозначить координаты на карте, чтобы пользователи могли определить ваше местоположение.

На этом этапе все. Надеемся, у вас не возникло проблем с настройкой шаблона.

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