Wordpress

Редактор шаблонов wordpress – Основы правильного редактирования шаблонов WordPress

23.10.2020

как изменить тему под себя? Сервисы и плагины для создания тем WordPress

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

Для редактирования шаблона я уже подвел основу, теперь я должен взять первый файл в разработку. Я открою файл index.php, так как он работает как скилет в устанавливаемом шаблоне для wordpress: указывает всем другим файлом на порядок и время загрузки в браузер пользователя. Открыв этот файл программой Notepad++ я обращаю внимание на первую строку.
Вижу следующий код

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

В самом начале работы смотрю на количество строк в файлах: в файле index.php 49 строк, но 17 пустых, а в файле header.php – 58 строк, из которых 31 – пустая. Когда я буду завершать работу редактирования шаблона, я удалю все пустые строки, браузер при загрузке страницы будет экономить время при чтении кодов – эта такая минимальная работа по адаптации шаблона для блога.

Перед редактированием файлов index.php и header.php меняю кодировку документов на UTF-8, я рассказывал об этом в предыдущей статье «Редактирование шаблона WordPress»

1 строка – очень важна для верификации документа, она подтверждает, что страница написана на верном языке, руководствуясь принятыми стандартами. Я за эту строку не переживаю – есть и пусть будет. Иду дальше.

Я обращая внимание на строку 2 – браузером

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

Обращаю внимания на 4 строку,

которую я заменю на строку

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

Продолжаем дальше оптимизировать шаблон – строка 5 или title страницы. Она очень важна для поисковой оптимизации блога. Поэтому я обязан его использовать, но и здесь его заполнение реализовано с помощью PHP – кода. А так этот код работает

А теперь маленькое отступление. Дело в том, что я для поисковой оптимизации блога использую плагин All in One SEO Plugin . С его помощью я прописываю все заглавные title, Description, Keywords для самого блога, и для каждой отдельной страницы. Вот такой код

Первая часть кода

вытягивает из базы данных блога название поста, вторая часть кода

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

В 6 строке идет подключение файла

О нем я недавно написал заметку. Я должен прописать путь к этому файлу, начиная с названия домена.

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

8 строка – должен прописать абсолютный путь к файлу xmlrpc.php.

Он короткий, вроде безобидный, но когда будет генерироваться главная страница блога, он загрузит очень много кода: стили плагина постраничной навигации, плагин капчи, All in One SEO Plugin, wp-syntax, Google Analytics, topsy. У Вас могут загружаться свойства, стили других установленных плагинов. Кроме того, выполняется вывод рабочих скриптов с папки CMS WordPress wp-includes.

Вывод один. Я должен оценить необходимость для блога каждого такого плагина, и решить нужен он или пустить под нож. Как пример, я не могу обойтись без плагина All in One SEO Plugin, очень много потратил времени на поиски плагина wp-syntax. Они грузят мой блог, но и отдача от них велика.

А вот без плагинов Вордпресс

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

Особенности шаблонов для WordPress

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

В состав темы входит несколько основных групп файлов:

  • CSS файлы – как и в обычном шаблоне, несут в себе стилевые описания всех элементов;
  • Шаблонные файлы – каждый из них отвечает за вывод информации в определенной части сайта. Данные шаблоны имеют расширение php ;
  • functions.php – файл дополнительной функциональности, который реализует интеграцию темы в движок;
  • Изображения – рисунки, которые используются в качестве фона.

Благодаря использованию ша

offlink.ru

Pinegrow WP — визуальный редактор для создания WordPress тем

Когда-то я рассматривал интересный проект Elastic Theme — визуальный редактор для создания WordPress шаблона непосредственно из админки. Сегодня расскажу о похожем, но более функциональном и мощном продукте — Pinegrow WP. Это отдельная версия профессионального десктопного веб-редактора Pinegrow, который используется при создании сайтов с адаптивностью, скриптами, Bootstrap’ом и другими фишками. Так вот Pinegrow WP — это специальное дополнение, позволяющее создавать именно WordPress шаблоны.

Основные функции Pinegrow WP:

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

  • Поддержка 175 WordPress тегов — позволяет быстро найти для элементов HTML макета нужные значения (заголовок поста, дата, имя автора).
  • Поддержка плагинов и PHP функций — в качестве параметров элементов можно выбирать не только WordPress теги, но и задавать переменные, добавлять PHP функции.
  • Просмотр в реальном времени создаваемой WordPress темы позволяет увидеть что получается после ваших настроек.
  • Просмотр генерируемого PHP кода для макета.

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

Вот небольшое видео как работает Pinegrow WP:

Вы можете потестировать данный софт самостоятельно. Для этого скачиваете программку с официального сайта (есть версии для Windows, Mac и Linux). После установки запрашиваете бесплатный временный лицензионный ключ (на 7 дней). Вводите пароль, что приходит на почту и попадаете в систему.

В настройках (значок шестеренки) Framework & Plugin Manager for index.html отмечаете WordPress, после чего загружаете какой-то HTML шаблон. Далее кликаете по определенным элементам макета и выбираете для них соответствующие WordPress функции. Например: для картинки — the_post_thumbnail, для заголовка — the_title, для даты — the_date и т.п. То есть пользователю не нужно знать как именно в WordPress задавать тот или иной элемент, просто ищите его в имеющихся функциях и добавляете в макет. Задав всем блокам на странице соответствующее значение, в итоге получите работающий WordPress шаблон для экспорта. Алгоритм приблизительно такой, хотя с программой Pinegrow WP придется разбираться детальнее (там очень много разных функций и настроек).

В целом, Pinegrow WP — штука очень мощная, но не бесплатная. Персональная лицензия (на 3 компьютера) стоит 99 долларов. Вы можете использовать ее для скольких угодно проектов! Есть лицензии для компаний и команд разработчиков. В принципе, именно для этих целей программа и нужна — если вы или ваша компания профессионально занимается созданием сайтов (в том числе и на WordPress), то этот софт пригодится.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

wordpressinside.ru

Как редактировать тему шаблон wordpress самостоятельно или с помощью программистов

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

Некоторые из этих методов, подойдут и начинающим вебмастерам. Ну а для некоторых, вам придется знать хотя-бы азы HTML, CSS, PHP.

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

Есть несколько способов, изменить настройки вашей темы:

С помощью встроенного редактора

После того, как вы установили тему, шаблон WordPress, вам станет доступным встроенный визуальный редактор. Если вы не знаете HTML, CSS, PHP, то вам сюда. Откройте меню Внешний вид, и выберите пункт Настроить

Открытие встроенного редактора в WordPressОткрытие встроенного редактора в WordPress

После чего, вы попадёте в визуальный редактор шаблона WordPress

Визуальный редактор WordPressВизуальный редактор WordPress

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

Визуальный редактор WordPress часть2Визуальный редактор WordPress часть2

Также встречаются PRO темы, который имеют отдельный редактор, в котором вообще почти все прописано. Это может быть несколько вкладок с самыми разными настройками.

С помощью тех поддержки.

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

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

Но есть и другой вариант. Заказать изменения у фрилансера. Есть биржи фриланса, и вы можете туда обратится. Понятное дело, вначале вы должны полностью определится, что именно вам нужно. Нужно изменить цвет заголовка, значит записываем в ТЗ. Нужно вставить фоновое изображение, снова дописываем в ТЗ. И вот так, вам нужно прописать каждое изменение. Да, и не забудьте загрузить файл темы в облако или хотя-бы её название.

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

Биржа фрилансаБиржа фриланса

На самом деле, таких бирж много, и вы можете выбрать любую.

Изменением кода темы

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

Любая тема WordPress, состоит из нескольких файлов (от десяти до пары сотен, в зависимости от темы). Но основных файлов, не так много. Их можно увидеть и отредактировать во встроенном редакторе.

С помощью встроенного редактора

Перед тем, как начать редактировать код во встроенном редакторе тем, я вам советую установить плагин подсветки кода. Например HTML Editor Syntax Highlighter. Благодаря плагину подсветки, вам будет легче смотреть код. После чего, вам нужно перейти непосредственно к редактору темы. Для этого, зайдите в меню Внешний вид, и выберите пункт Редактор.

Встроенный редактор тем в WordPressВстроенный редактор тем в WordPress

Вы увидите две области редактора. Посередине, окно редактирования. Справа, окно выбора файлов для редактирования.

Почти все темы WordPress, имеют шаблонную структуру.

Файл style.css. Этот файл отвечает за внешний вид вашего сайта. Каким будет цвет шапки, цвет текста, отступы и многое другое.

Файлы header.php, index.php, page.php, sidebar.php, footer.php и так далее. Эти файлы отвечают за функционал сайта. Если вы хотите добавить рекламный баннер в шапке сайта, то вам нужно изменить header.php, если вы хотите убрать или изменить значок копирайта в подвале сайта, то вам нужно изменить footer.php

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

Изменение копирайта в теме WordPressИзменение копирайта в теме WordPress

Для этого, открываем файл footer.php, прописываем своё значение, и нажимаем кнопку Обновить файл.

Внимание! Перед любыми изменениями в файлах темы, сделайте бэкап сайта.

С помощью файл менеджера хостинга

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

Но помните, для редактирования, походят не все редакторы, Word и ему подобные не подойдут. Лучше использовать простой блокнот. А ещё лучше, использовать специальные программы для редактирования файлов на языках программирования, например Sublime Text.

Чтобы найти файлы темы, зайдите на сайт, найдите папку wp-content, перейдите в папку themes, выберите вашу активную тему. После этого, вы сможете отредактировать ваш файл.

Файл менеджер хостинг провайдераФайл менеджер хостинг провайдера

С помощью FTP менеджера

Есть много различных файл менеджеров, с помощью которых можно зайти на свой сервер и отредактировать нужный вам файл. Например, это FTP менеджер File Zilla, или менеджер, встроенный в Total Commander. При регистрации на хостинге, вам должны были выслать данные для входа по FTP.

Настройки FTP менеджераНастройки FTP менеджера

Запустите программу, введите эти данные, и вы сможете изменять файлы вашего сайта (не только файлы тем, но и другие файлы тоже).

FTP менеджерFTP менеджер

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

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

vachevskiy.ru

как изменить тему под себя

Быстрый старт с CMS Webdirector :

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

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

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

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

Сначала, при помощи визуального web редактора, разработчик включая и выключая флаги задает из каких информационных зон будет состоять страница на данном страничном шаблоне (всего может быть 9 зон). Затем, для каждой зоны, при помощи визуального html редактора, разработчик выбирает в выпадающем списке информационное наполнение (меню, страничный текст, заголовок — есть много вариантов). Так же есть возможность выбрать пункт «произвольное наполнение», позволяющий вставить в зону произвольный HTML, JS, PHP код или комбинацию из автоматически генерируемых элементов и произвольного кода.

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

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

Для руководителей дизайн-студий этот инструмент дает возможность существенно сократить время на верстку шаблонов по утвержденному дизайну.

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

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

» мы продолжили обзор инструментов TemplateToaster и рассмотрели новшества, которые появились в 5-й версии программы по сравнению с 4-й.

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

Меню

Для настройки внешнего вида меню редактор шаблонов предоставляет целый ряд инструментов на одноимённой вкладке (рисунок ниже).

Область PresetGroup, инструмент Пресеты . Данный инструмент (рисунок ниже) содержит готовые стили оформления меню.


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

Область Подменю . Настройка «макета» и «реакции» подменю.

  • Click . Открытие подменю по нажатию на кнопку пункта меню.
  • Hover . Открытие подменю при наведении курсора мыши на кнопку пункта меню.

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




В зависимости от выбранного инструмента (Мега , Вертикальный и ) будут доступны другие. Например, если выбрать Мега , то можно настроить Область подменю, Пункт меню и Заголовок подменю . Если выбрать Вертикальный или , то только Область подменю и Пункт меню .

Область Подменю, инструмент Область подменю . Можно настроить задний фон (цвет, градиент или изображение), гр

thesaker.ru

Как подключить внешний редактор для шаблонов WordPress

Заказать сайт под ключ

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

Настраиваем редактор для шаблонов WordPress.

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

 

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

Ведь наш редактор а вернее схема настройки позволяет исправить все косяки.

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

Как писал в предыдущей статье Первые настройки WordPress это один самых важных моментов.

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

И в случае если что либо на  косячили, легко все вернуть на место.

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

Я показываю на примере блога на WordPress, но этот метод можно применить к любой CMS. Я точно так же правил шаблона Joomla и DLE.

Только не путайте с редактором для добавления новостей, с этой задачей хорошо справляется Windows Live Writer.

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

Схема подключения и работы редактора для шаблонов WordPress.

 

 

скачать видео на свой компьютер.

Настраивайте систему редактирования шаблонов WordPress и работайте с блогом комфортно!

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

Мне удобнее работать на удаленном.

 

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

Федор Ашифин
Федор Ашифин.
Создание проектов под ключ любой сложности!
Доводка сырых сайтов до кондиции
Разработка уникального дизайна под заказ
Верстка и натяжка на популярные ситемы: WordPress, MODX, OpenCart
Обращайтесь, сделаем качественно и красиво! Skype: ashifin Viber/Mob: V+380503613708 Как заказать сайт?

info-m.pro

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

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

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

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

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

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

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

Структура страницы wordpress шаблона

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

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

стандартная тема wordpress

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

структура темы wordpress

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

Header.php – этот файл ответственный за верхнюю часть страницы блога. В нем находятся логотип и название.

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

Footer.php – файл отвечающий за вывод информации в подвале (низу) блога. Как правило, там располагается счетчик количества посещений, автор блога и другие…

Index.php – это один из главных файлов, он выводит информацию на главной странице блога. Не путайте с файлом single.php.

Page.php – данный файл темы выводит информацию статических страниц блога (об авторе, контакты, реклама и другие).

Single.php – самый основной файл wordpress, так как здесь выводится информация всех записей блога.

Archive.php – этот файлик отвечает за вывод архива на блоге, (записей в архиве).

Search.php – файл занимается выводом страниц в поиске блога, (что будет показываться в результатах поиска).

Author.php – данный файл выводит записи определенного автора. Он вам пригодится, если блог ведут несколько человек.

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

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

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

настройка темы

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

 — изменим рисунок шапки темы;
 — изменим местами название и описание блога;
 — убирем ссылку вордпресс в подвале темы;

Меняем шапку блога

Шапка на блоге выводится с помощью картинки path.jpg, которая расположена в папке images редактируемой темы wordpress.

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

c:\hosting\home\localhost\www\my-site.ru\wp-content\themes\twentyten\images\headers\

c:\hosting\home\localhost\www\my-site.ru\wp-content\themes\twentyten\images\headers\

Если вы настраиваете шапку на хостинге, использую ftp-клиент тогда:

http://ваш_сайт/wp-content/themes/twentyten\images\headers\

http://ваш_сайт/wp-content/themes/twentyten\images\headers\

Заходим в папку images темы и находим картинку, которая стоит в шапке блога path.jpg

редактируем шапку

Открываем ее с помощью программы «Adobe Photoshop». Если хотите редактировать все своими руками, тогда от вас потребуется самые элементарные знания программы.

В «Adobe Photoshop» с данной картинкой можете делать все что угодно вашей фантазии (нарисовать логотип, написать текст, добавить разные эффекты).

редактирование шапки в фотошопе

Если хотите, можно найти любую другую картинку и в программе подогнать размер под оригинальную. Не забудьте сохранить новое изображение под тем же именем path.jpg.

редактирование шапки сайта

Редактируем название Title и описание description

Мы видим, что название и описание блога, которое вы пишите в «Параметрах» — «Общие» консоли wordpress, расположены следующим образом.

настройка описания блога

Заголовок расположен слева, а краткое описание справа.

редактирование описания шапки

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

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

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

редактируем файлы темы

Здесь меняем положение значения «left» на «right» и выставляем отступ от правого края «250 px».

изменяем файлы

Здесь меняем значения «right» на «left».

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

редактирование описания шапки

Убираем ссылку wordpress в подвале блога

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

изменяем ссылку футера wordpress

Для этого переходим в footer.php и находим следующий код:

изменяем footer вордпресс темы

Удаляем выделенный код и вставляем туда свой текст в виде ссылки или картинку.

изменяем footer

Можно посмотреть окончательный результат редактируемой темы wordpress.

результат работы над темой

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

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

seoslim.ru

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

Определились с шаблоном? Активировали его? Молодцы! Но если шаблон, так сказать, требует доработки, то для этого в WordPress имеется встроенный редактор файлов шаблона.

Авторизуемся в панели администратора блога и переходим в подпункт «Редактор» пункта «Внешний вид».

Откроется форма «Редактировать темы», в которой будет прогружен файл style.css. Именно этот файл необходимо редактировать если Вас не устраивает стиль отображения того или иного пункта шаблона блога.

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

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

Самое интересное, что для того что бы самостоятельно вносить изменения Вам необходимо хоть чуточку знать основы html и php. После внесения изменений в тот или иной код страницы необходимо сохранить её, нажав по кнопке внизу «Обновить файл». Да, и ещё, для того что бы понять какими функциями напичкана та или иная страница шаблона, в нижней части формы есть поле «Документация». Это поле поможет найти информацию по функции путем её выбора из выпадающего списка и нажатия на кнопку «Поиск». Нас перенаправит на официальный сайт WordPress, где каждая функция описана в документации. Может, кстати, случится и такое что требуемая функция не будет представлена на сайте, в этом случае придется изучать её самому, полазив по внутренностям шаблона.

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

wordpresse.ru

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

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