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


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

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

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

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

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

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

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

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

Из инструментов нам понадобятся:


  •  Браузер Mozilla Firefox
  • Установить на Мозилу плагин Firebug.
  • Для редактирования можно использовать обычный текстовый редактор, но лучше это делать с помощью Notepad++,  там есть подсветка кода, и возможность смены кодировки, так что качаем и его.

Как поменять дизайн шаблона WordPress

После того как все скачано и установлено, открываем наш сайт в Мозиле и запускаем плагин firebug нажав на значек жука.

запуск firebug

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

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

К примеру мы имеем такого вида страницу, и хотим изменить цвет панели навигации.


Меняем дизайн шаблона WordPress

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

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

плагин фаербаг

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

Теперь мы видим, что в коде выбранный нами блок это div с идентификатором “access”  В правой части плагина, во вкладке стиль, у нас отображены все свойства для этого идентификатора.  Он принадлежит файлу style.css и правило для этого элемента находится на 375й строке данного файла.


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

За  свойства фона у него отвечает строчка background, а конкретно за цвет в сокращенной записи именно  этот пункт #000000 Не пугайтесь,  это всего лишь шестнадцатеричный код черного цвета ?

Кликнув по нему мышью вы сможете отредактировать значение по вашему усмотрению и посмотреть тут же в окне браузера, как изменится элемент страницы. Я например введу #3E6A97 что бы получился грязно-синий цвет этой панельки.

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

Можете поэкспериментировать с разными значениями и элементами. Не бойтесь  — внесенные изменения в окне плагина никак не повлияют на вашу страницу на сервере – они действительны лишь в текущем кэше вашего браузера. При обновлении страницы все настройки сбросятся.

И как нам сделать так, что бы эти изменения сохранить для страницы на сервере, спросите вы?

Очень просто. Заходим через  FTP клиент на наш сайт, переходим в папку с нашей темой, в данном случае это папка  wp-content/ themes/ twentyten/ и находим там файл style.css.

Это и есть таблица стилей, где хранятся основные настройки внешнего вида нашего шаблона. Открываем ее с помощью Notepad++ ,находим нужную нам 375-ю строчку с правилом для идентификатора access и заменяем черный цвет на нужный нам #3E6A97.


редактируем тему WordPress

Сохраняем файл(не забываем про кодировку UTF_8 без BOM) заливаем на сервер измененный файл, обновляем страницу браузера и наслаждаемся результатами)

ruskweb.ru

Доброго времени суток, уважаемые читатели блога jCover.ru. Сегодня предлагаю поговорить с Вами о том, как мы можем отредактировать шаблон на WordPress. Предположу, что со скачиванием, установкой и активацией шаблона в админке WordPress проблем у вас не возникло.

Для редактирования необходимой страницы шаблона, мы можем воспользоваться 2 способами:

  • Редактирование непосредственно в административном меню WordPress. Для этого вам необходимо будет зайти в админку WordPress (http://sitename.ru/wp-admin/) и выбрать из левого меню админки пункт «Внешний вид»->»Редактор».

Wordpress как редактировать шаблон
Откроется страница редактирования темы, на которой в колонке справа будут расположены названия файлов (страницы в формате php), а посередине выбранный файл шаблона для редактирования.


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

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

  • В случае, если вы используете в качестве хостинга для вашего блога хостинг-провайдера, вам необходимо будет подключиться к нему (блогу) по протоколу FTP и зайти в папку с текущей темой оформления (шаблоном), которую вы намерены редактировать и которая в данный момент используется (активна) на вашем WordPress блоге:

 [sitename/wp-content/themes/Название папки с вашей темой оформления]

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

  • index.php — Главная страница вашего блога
  • archive.php — Страниа вывода рубрик и/или архивов вашего блога
  • sidebar.php — Боковое поле с меню
  • search.php — Страница вывода ответов на поисковые запросы
  • style.css — Файл, содержащий стили вашей темы

jcover.ru

Добавить меню

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

Чтобы вставить меню в любое место, добавьте строку:

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

где вместо Меню_1 нужно ввести название вашего меню.

Изменить страницу 404

Если ссылка ведёт на несуществующую страницу или файл, WordPress переводит пользователя на страницу ошибки с кодом 404 (Файл не найден). За неё отвечает файл 404.php, хранящийся в папке активной темы. Зачастую на экран выводится английский текст, и желание владельца русскоязычного сайта перевести его на родной язык вполне понятно.

Чтобы изменить содержимое страницы откройте в редакторе файл 404.php, найдите строки с отображающимся в браузере текстом и измените их (выводимый текст чаще всего заключается в кавычки). Например, в одной из стандартных тем (twentyfourteen) вас будет интересовать следующий код:

Замените текст в кавычках (не там, где twentyfourteen, а другой) на свой и получите видоизменённую страницу 404.

Прописать копирайт


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

За «ноги» сайта, как мы знаем, отвечает хранящийся в корне активной темы файл footer.php, и искать отвечающий за копирайт код следует именно в нём.

Например, тема flat-white вспомогательную информацию прячет в следующих строках этого файла:

Русифицировать текст

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

Например, в шаблоне flat-white сразу хочется русифицировать как минимум две надписи: «READ MORE» и «Leave a Comment», так как их видно на главной странице.

За главную страницу отвечает файл index.php, расположенный в корне каталога темы, следовательно, редактировать надо его. Но текста надписей в нём нет, поэтому необходимо разбираться в коде, чтобы узнать, где они хранятся. В нашем случае за информацию под постами на главной странице отвечает файл template-parts/content.php, подключенный строкой


Если перейти в него и в коде

текст Leave a Comment заменить на Оставить комментарий, а вместо Read More написать Далее, то текст изменится и в браузере.

www.seostop.ru

Где лежат файлы

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

wp-contentthemes


В каждой папке лежит отдельная тема.
А файл настроек WordPress wp-config.php, он тоже может понадобиться, находится в основной директории.

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

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

  • single.php – используется WordPress для вывода записей;
  • page.php – вывод страниц;
  • archive.php, category.php и т.п. – показывает страницы списков;
  • image.php – прикрепленное изображение;
  • 404.php – ошибка;

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

/**  * The template for displaying all pages  *  * This is the template that displays all pages by default.  * Please note that this is the WordPress construct of pages and that  * other 'pages' on your WordPress site will use a different template.  *  * @package WordPress  * @subpackage Twenty_Fourteen  * @since Twenty Fourteen 1.0  */  get_header(); ?>  <div id="main-content" class="main-content">  <?php 	if ( is_front_page() && twentyfourteen_has_featured_posts() ) { 		// Include the featured content template. 		get_template_part( 'featured-content' ); 	} ?> 	<div id="primary" class="content-area"> 		<div id="content" class="site-content" role="main">  			<?php 				// Start the Loop. 				while ( have_posts() ) : the_post();  					// Include the page content template.  

get_template_part( 'content', 'page' ); // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar( 'content' ); ?> </div><!-- #main-content --> <?php get_sidebar(); get_footer();

Некоторые из функций обращаются к другим файлам:

  • get_header() – показывает содержимое файла header.php (шапку);
  • get_template_part( 'content', 'page' ) – шаблон с указанным именем;
  • comments_template() – комментарии comments.php;
  • get_sidebar() – сайдбары с виджетами;
  • get_footer() – футер сайта.

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

//get_sidebar();


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

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

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

Поиск в файлах темы WordPress с помощью Notepad++
Поиск в файлах темы WordPress с помощью Notepad++
Настройка поиска в Notepad++
Настройка поиска в Notepad++
Notepad++, поиск в файлах
Укажите путь к своей теме

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

Специфические функции шаблона

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

Стили темы

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

 a { 	color: #0033cc; } 


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

 #my-sidebar { 	display: none; } 

Как найти нужный элемент

Если вы пользуетесь Chrome, то у вас в контекстном меню, всплывающем по клику правой кнопкой на любом элементе страницы, есть пункт “Просмотр кода элемента”. Это меню выводит на экран окно инструментов для разработчика. Здесь очень удобно искать названия классов и id элементов, причем, при наведении мышки на строку с html в окне developer tools элементы подсвечиваются и на самой странице сайта.

Инструменты разработчика
Окно инструментов разработчика в Chrome

Зная id элемента, остается прописать для него нужный стиль в файл style.css. Если вы не можете найти нужное место в style.css для переопределения стиля, то, в крайнем случае, можно задать ему наивысший приоритет с помощью оператора !important:

 #my-sidebar { 	display: none !important; } 


Теперь точно должно сработать.

Стирать или не стирать

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

//Sample Comment


html:

<!-- Sample Comment -->


css:

/* Sample Comment */


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

Обновление тем

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

Дочерний шаблон

Вместо того, чтобы править исходную тему, можно создать свой личный дочерний вариант для правки. Чтобы сделать дочернюю тему нужно создать новую папку в том же разделе, где лежит основная тема, и скопировать туда файл style.css исходной темы. В этом файле (в самом начале) надо заменить название на свое и указать для нее родительскую тему.
Например, чтобы сделать дочернюю тему для Twenty Fourteen заголовок можно поменять следующим образом:

 /*  Theme Name: Twenty Fourteen Child  Theme URI: //example.com/twenty-fourteen-child/  Description: Twenty Fourteen Child Theme  Author: I AM  Author URI: //example.com  Template: twentyfourteen  Version: 1.0.0  Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready  Text Domain: twenty-fourteen-child */


После этого появится возможность выбрать новую тему Twenty Fourteen Child в админке WordPress. В эту папку можно копировать те файлы, в которых планируется производить изменения (кроме functions.php и ему подобных). Так очень удобно редактировать шаблон WordPress, потому что видно именно те файлы, в которых есть изменения.

С более полным и корректным на настоящий момент способом создания дочерней темы можно ознакомиться здесь.

visualpharm.com

Чем открыть шаблон WordPress?

Хочу сразу отметить, что если вы ничего не понимаете в кодах, CSS и HTML, то лучше не пытаться ничего делать. Ваши пробы редактирования шаблона могут привести к полной не функциональности сайта. Совсем другое, если какой-то урок четко прописывает действия и этапы выполнения, где написано откуда скопировать и куда вставить. Однако, подстрахуйтесь и сделайте бэкап данных (резервная копия), чтоб в любой момент восстановить сайт в изначальном виде.

Как менять шаблоны WordPress?

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

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

  1. Откройте админку WordPress.
  2. Далее выберите Внешний вид-Редактор.
  3. В колонке справа будут все файлы шаблона, которые можно редактировать. Выбираете нужный вам файл, измените его и жмете Обновить.

Выберите Внешний вид-Редактор.

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

Редактирование файлов используя файловый менеджер хостинга

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

Редактировать шаблон WordPress на хостинге.

Файлы WordPress шаблона, которые редактируются, размещены в папке: /wp-content/themes/название_вашего_шаблона/. Открываете ее и ищете необходимый для редактирования файл.

Редактирование темы на ftp

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

  • Запустите свой клиент ftp. Можно использовать Total Commander или же FileZilla для подключения клиента ftp. Проверьте соединение с вашим сайтом и откройте папку вашего шаблона: /wp-content/themes/название_вашго_шаблона/
  • Файл, который планируете редактировать, скопируйте на локальный диск.
  • Откройте данный файл в программе — редакторе кода и можете смело вносить все нужные изменения.

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

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

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

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

Developers Tools

Выводы

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

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

www.templatemonster.com

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

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

Самое важное – не бойтесь. Редактировать что-либо обычно всегда проще, чем создавать с нуля. Это справедливо и для wordpress шаблонов. Чтобы разобраться, как его изменять, необходимо для начала определить его структуру. Итак, шаблон или тема состоит, по сути, из двух вещей:

PHP-файлы и их редактирование

Чтобы полноценно редактировать php-файлы в wordpress-темах, вы должны владеть хотя бы основами этого языка. То есть хотя бы понимать базовый синтаксис языка, самые простые понятия. Ну или как минимум вы должны уметь пользоваться справочником. Например, по функциям wordpress есть хороший справочник – wp-kama.ru.

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

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

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

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

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

Тут можно выделить еще 2 файла:

Важное дополнение

Все, что мы рассмотрели, это лишь основные php-файлы, которые создаются при разработке любого wordpress-шаблона. Но никто не мешает разработчику добавить свои шаблоны, и вот они уже могут называться как угодно. Хотя обычно толковый разработчик называет эти файлы так, что по названию примерно понятна задача файла. Например, content-meta.php. По названию можно догадаться, что в файле содержиться мета-информация о контенте. То есть это может быть имя автора, время публикации, кол-во просмотров и комментариев и т.д.

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

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

Изменение внешнего вида уже имеющихся элементов

Например, в шапке у вас заголовок, и вы хотите сделать его синим, а не зеленым, допустим. Что делать? Открываете сайт в браузере Yandex Browser или Google Chrome, далее жмете F12. Перед вами появится отладчик. Раскрываете там структуру сайта. Отладчик подсвечивает вам блок на сайте, к которому относится тот или иной тег.

Приведу пример с главной страницей нашего сайта. Допустим, захочется нам изменить 4-й блок навигации – наши курсы. Как это сделать?

Заходим на главную, жмем F12, появляется отладчик. Начинаем раскрывать нужный тег. Для этого нажимайте на треугольник. Базовые знания html тут вам, конечно, тоже пригодятся. Например, вы должны понимать, что все содержимое сайта лежит в теге body. Короче, вы должны найти искомый элемент.

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

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

Все, когда эта информация найдена, вам остается открыть style.css, нажать Ctrl + F для поиска и ввести там название класса. В нашем случае nav4. Конечно, с webformyself это сделать не получится, потому что у вас просто нет доступа к сайту, но вот со своим шаблоном без проблем.

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

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

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

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

Редактирование php-файлов, добавление или удаление элементов

В принципе, что-то удалить обычно проще, чем что-то добавить. До удаления можно додуматься чисто интуитивно. Например, выводиться у вас перед статьей дата публикации, а вы хотите ее перенести под статью. Вы даже чисто интуитивно можете открыть single.php и найти там блок, в котором будут слова вроде date, time и т.д. Выделить его, вырезать и вставить после вывода статьи.

А вот чтобы что-то добавить, вам нужно чуть-чуть лучше знать html и php. Или хотя бы уметь пользоваться справочником по wordpress-функциям и общим справочником по html-тегам.

Например, вам нужно вывести имя автора в каждой статье. Как вы понимаете, для этого нужно редактировать файл single.php. В нем нужно где-то перед статьей или в ее конце вывести примерно такой код:

Пример я как раз взял из справочника. Вам необязательно знать заранее название функции, вы можете просто ввести в поле поиска в справочнике что-то вроде “выводит имя” и вот уже справочник сам подсказывает нам подходящие функции:

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

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

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

webformyself.com

4 шага для редактирование шаблона WordPress

  1. Файлы шаблона WordPress
  2. Расстановка WordPress тегов h1, h2, h3, div,p
  3. Как убрать ссылки WordPress
  4. Перевод шаблона
  5. Редактируем заголовки в сайдбаре

2. Расстановка wordpress тегов h1, h2, h3, div,p

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

1. Редактирование заголовка шаблона WordPress.

В стандартных шаблонах wordpress, заголовок блога в тегах h1 или h2 для блога это не правильно. Потому что человек ищет решение проблемы, а не сайт. Поэтому дорабатываем тему. При этом делаем так, что бы главная страница осталась под тегом h1. А на остальных не дублировалось. Заходим в панель администратора > внешний вид > редактор> header.php редактирование темы wordpress Находим код заключённый в тег h1, скорее всего вы найдёте что-то типо этого

[php]&amp;lt;h1&amp;gt;&amp;lt;a href=&quot;&amp;lt;?php bloginfo (‘url’); ?&amp;gt;&quot;&amp;gt;&amp;lt;?php bloginfo (‘info’); ?&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/h1&amp;gt;[/php]

Теперь нам следует заменить, копируйте код который ниже и замените всю строчку начиная от <h1> до </h1> вот на это

[php]&amp;lt;?php if (is_home ()){ ?&amp;gt;&lt;br /&gt;&amp;lt;h1&amp;gt;&amp;lt;?php bloginfo (‘info’); ?&amp;gt;&amp;lt;/h1&amp;gt;&lt;br /&gt;&lt;br /&gt;&amp;lt;?php } else {?&amp;gt;&lt;br /&gt;&lt;br /&gt;&amp;lt;p&amp;gt;&amp;lt;a href=&quot;&amp;lt;?php bloginfo (‘url’); ?&amp;gt;&quot;&amp;gt;&amp;lt;?php bloginfo (‘info’); ?&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;&lt;br /&gt;&lt;br /&gt;&amp;lt;?php } ?&amp;gt;&amp;lt;span style=&quot;font-size: 13px; line-height: 19px;&quot;&amp;gt;[/php]

После этого найдите файл style.css (стили) он находится всё в той же панели где вы нашли header.php. В style.css нужно найти стили, которые прописаны для контейнера. Выглядеть будет на подобие этогоЗаголовок блога Теперь вы должны изменить несколько h1 на pредактирование заголовка и добавляем в #header-title p в конце строчку margin:0; Выглядит это такВыравнивание заголовка Теперь можете порадоваться, у вас правильный заголовок блога, поздравляю!

2. Редактирование заголовка статей

Процедура редактирования заголовка статей будет чем-то похоже на редактирование заголовка блога. Обычно в скаченных темах, в статьях стоит заголовок в теге h2 и ещё одна ошибка это то, что заголовок даёт ссылку на себя, что является не правильным! Надо найти файл single.php, он находится в той же панели, где вы нашли header.php и style.css Заходим и ищем тег h2 Примерно такой

[php]&amp;lt;h2&amp;gt;&amp;lt;a href=&quot;&amp;lt;?php the_permalink() ?&amp;gt;&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to &amp;lt;?php the_title_attribute(); ?&amp;gt;&quot;&amp;gt;&amp;lt;?php the_title(); ?&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/h2&amp;gt;[/php]

Заменяем его на

[php]&amp;lt;h1&amp;gt;&amp;lt;?php the_title(); ?&amp;gt;&amp;lt;/h1&amp;gt;[/php]

Теперь надо зайти в файл style.css и найти стиль должен быть похож на этоСтили заголовка статей Меняем выделенное с h2 на h1 и сохраняем. Теперь у вас правильные заголовки статей, что даёт большой плюс! Можно так же сделать оптимизацию в сайдбаре, если будет интересно, то допишу это в статье! Плюсом будет, что у вас уберутся из сайдбара теги h2,h3 тем самым уберутся лишние ключевые слова.

3. Как убрать ссылки WordPress

Если вы убираете ссылки WordPress, есть риск повредить тему т.к чаще всего они являются закодированными и в ссылки невозможно вставить свой текст. В таких случаях приходится раскодировать и лишь, потом удалять. Поэтому рассмотрим 2 варианта, когда лишние ссылки убираются легко и когда надо раскодировать. Что бы узнать какой у вас вид ссылок в этом вам поможет плагин Theme Authenticity Checker (TAC). После установки зайдите в темы, если около темы есть надпись, Theme ok — значит в теме нет зашифрованных кодов. Encrypted Code Found! – есть зашифрованные коды. Static Link (s) Found… – количество найденных ссылок.

Плагин TAC

После определения ссылок, смотрите в шаблоне в какой части сайта они расположены. Как правило, они в самом низу. Если так, находим файл footer.php (подвал). Всё в той же панели, где вы заходили в header.php

1. Ссылки не закодированы

Если ссылка простая без <div id> , то можете смело удалять и пропускать пункт с удалением ссылок. Если содержит <div id> приведу пример

[php]&amp;lt;div id=&quot;seosko&quot;&amp;lt;a href=&quot;http://seosko.ru&quot; target=&quot;_blank&quot;Сео продвижение сайтов, блоггинг&amp;lt;/a&amp;gt;&amp;lt;/div&amp;gt;[/php]

то для удаление нужно будет найти ссылку в function.php Удалять ссылки следует одновременно из footer и function поэтому рекомендую скачать тему на компьютер и там в файлах удалить эту ссылку из 2ух файлов footer.php и function.php

2. Закодированные ссылки

Закодированные ссылки выглядят примерно так Phsasuqjs13Jspasjd… ( это обычно не связные буквы,цифры) найти будет не трудно. Что бы узнать, что это за ссылки вам потребуется. Декодер, которой дешифрует ссылки вот он webpeppers  просто вводите туда закодированную ссылку, он вам выдаст нормальный текст, этот текст, вставляем вместо закодированной ссылки в файл wordpress, где была закодированная ссылка, и сохраняете изменения, потом удаляете ссылку и опять сохраняете.

4. Перевод шаблона

Что бы перевести шаблон на уровне профи, потребуется отдельная статья про это. Здесь же вы найдёте, метод для начинающих. Держитесь, так как это уже последний пункт в редактирование шаблона WordPress. Здесь Покажу сам принцип действия. Для перевода скачайте сразу notepad ++, через него удобно смотреть что можно заменить в кодах, а что нет.
1.Скачайте свою тему на компьютер
2.Откройте файл через notepad++ Вот пример на файле archive.phpАрхив то что выделяется чёрным цветом, можем переводить спокойно. 3.После перевода в файле, находим в верхнем меню кодировку и ставим преобразовать в UTF-8 без BOM.8 без bom 4.Сохраняем файл. Если у вас квадратики значит тема не поддерживает кириллицу. Либо файл был сохранен не как UTF-8 без BOM. Поэтому прошу вас быть предельно аккуратным с переводом шаблона.
Задавайте вопросы, если что-то непонятно или хотите уточнить детали. Тем самым вы поможете в редактирование мануала. Надеюсь у вас на редактирование шаблона WordPress ушло не более 5-10 минут!

5. Редактируем заголовки в сайдбаре

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

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

    • Внешний вид > Редактор > style.css (обычно находится в самом низу справа под заголовком «Стили»). Добавляем такие строчки как на картинки в рамке, делается это ближе к концу самого файла и делайте 1 в 1.widgettitle
      Обратите внимание, что 24px — это размер заголовка, кроме этого вы можете прописать цвет, толщину и даже анимацию!

2. Замена заголовков h2 или h3 на p или div

  • Заменяем заголовки в файле вашей темы functions.php (theme functions или функции сайта). Находим собственно сам заголовок. В моём случая, я просто заменил h3 на p class=»widgettitle», а закрытие h3 просто на p.pclass
    Иногда сама функция сайдбара другая, но строки всегда остаются такими же для замены.

seosko.ru

1. Заказать уникальный шаблон

У этого варианта есть только один минус – это его цена. Заказать создание уникального шаблона специально для вас можно в какой-нибудь фирме или найти исполнителя на биржах удаленных работников (FL.ru или weblancer.net).

Цена, действительно, кусается. Это обойдется вам, как минимум, в 10000 рублей.

Всё зависит от дизайна и количества функций, которые вы хотите внедрить в код сайта.

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

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

2. Официальные депозитарии WordPress

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

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

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

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

Добавить новую тему

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

Предусмотрены следующие характеристики:

  • Цвета
  • Разметка
  • Функции
  • Темы

Фильтр для поиска тем

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

Загрузка новой темы

Кстати вот список ресурсов, которые вы можете посетить с этой целью:

  • wordpress.org/themes/
  • fabthemes.com/
  • wpthemesdir.com/
  • topwpthemes.com/

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

Если что-то было непонятно, то посмотрите еще видеоурок:

3. Зарубежные темы

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

Платные темы стоят здесь примерно от 5 до 100 долларов.

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

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

  • appthemes.com/
  • colorlabsproject.com/
  • studiopress.com/
  • themetrust.com/
  • elegantthemes.com/
  • obox-design.com/
  • themefuse.com/
  • wpzoom.com/
  • themify.me/
  • woothemes.com/
  • graphpaperpress.com/
  • themeforest.net/
  • templatic.com/
  • templatelite.com/
  • mythemeshop.com/
  • press75.com/
  • solostream.com/

Когда найдете подходящую тему, оплатите ее и скачайте на компьютер. Потом можете непосредственно установить в свой вордпресс.

4. Яндекс и Google в помощь

Если вдруг вы до сих пор не определились с выбором, то у меня остался последний совет. Зайдите в поисковик яндекс или google, введите в строку поиска «скачать тему на вордпресс» или что-то в этом роде.

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

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

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

Кстати нашел видео на своем ютуб канале как раз об этом. Записывал я его еще тогда, когда был сторонником всего бесплатного. Если вы всё-таки решили воспользоваться поиском, то рекомендую посмотреть =)

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

Моя уникальная тема

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

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

Если остались вопросы или есть, что добавить, то пишите комментарии.

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

С уважением! Абдуллин Руслан

abdullinru.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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