Как изменить вордпресс свой шаблон. Редактирование шаблона WordPress: как изменить тему под себя? Яндекс и Google в помощь

Всем привет! С вами снова Абдуллин Руслан. Эта статья будет полезна всем, кто совсем недавно создал свой сайт на . Каждый хочет, чтобы его веб-ресурс был оригинальным и отличался от других.

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

Итак, сегодня я расскажу вам, как изменить шаблон wordpress, чтобы сделать ваше «детище» более уникальным и красивым.

Но сначала я поделюсь некоторыми новостями из своей жизни. На той неделе в моем городе Омске проходил Всероссийский турнир по борьбе самбо имени А.М. Пушницы. Я принимал участие в этих соревнованиях в весовой категории до 68 кг, хотя обычно я борюсь в 62 кг.

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

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

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

Открытие соревнований было довольно интересным. Я сделал пару фотографий.

Вернемся к основному вопросу. Как установить другую вордпресс тему?

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

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

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

1. Нравится ли он вам?
2. Наличие всевозможных функций. Лишние функции засоряют интерфейс, продлевают загрузку страниц и так далее.
3. Наличие вирусов и другого шпионского программного обеспечения
4. Уникальность
5. Конечно же, цена

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, введите в строку поиска «скачать тему на вордпресс» или что-то в этом роде.

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

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

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

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

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

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

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

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

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

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

Сервис SendPulse – это маркетинговый инструмент для создания подписной базы и перевода случайных посетителей вашего сайта в разряд постоянных. SendPulse объединяет на одной платформе важнейшие функции для привлечения и удержания клиентов:
● e-mail-рассылки,
● web-push,
● SMS рассылки,
● SMTP,
● рассылки в Viber,
● отправка сообщений в facebook messenger.

Рассылки email

Отправка Push уведомлений

SMTP

Боты Facebook Messenger

Отправка SMS

Партнерская программа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что можно изменить в шаблоне WordPress?

Да практически все 🙂 Таким образом вы можете менять:

• отображение текста — выделяем фаербагом текст и ищем в стилях его свойства, к примеру font-size: 14px это размер шрифта, color это цвет теста, font-family семейство шрифтов и т.д.
• width и height размеры элементов длина и высота,
• border рамки.
• img картинки и иконки, обычно идут вместе с ссылками
• margin и padding отступы внешние и внутренние
• позиционирование элементов
• background свойства фона
• И многое другое, для любого элемента вашей страницы можно прописать свои стили.

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

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

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

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

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

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

Для тех кто уже знаком с CSS тема может показаться слишком разжеванной, для новичков же слишком сложной, поэтому если есть какие-то вопросы по вашим шаблонам или что-то непонятно, не стесняйтесь, обращайтесь в комментариях 🙂

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

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

1. Выберите команду Файл>Создать .

На экране появится область задач Создание документа .

1. Выберите шаблон из списка или щелкните на ссылке На моем компьютере , чтобы открыть шаблон с жесткого диска.

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

1. Внесите изменения.

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

1. Сохраните отредактированный шаблон, выбрав команду Файл>Сохранить как .
2. Присвойте шаблону новое имя, а исходный шаблон оставьте без изменений.
3. Выберите в раскрывающемся списке Тип файлов значение Шаблон документа .
4. Щелкните на кнопке Сохранить .

Примечание

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

Загадка сохранения файлов шаблонов на жестком диске

Зачастую легче изменить существующий шаблон, как описано в этой главе, чем найти необходимый [ шаблон на жестком диске своего компьютера. Не думайте, что я преувеличиваю, но места, в которых Word сохраняет шаблоны документов, найти совсем не престо. Расположение шаблонов - это не секрет, но само место выбрано, мягко говоря, неудачно. В Windows XP в качестве хранилища всех данных пользователя используется папка Documents and Settings. В этой папке вы найдете папку Application Data, в которой многие приложения сохраняют данные, специфические для пользователей. Шаблоны следует искать таким образом: найдите папку Microsoft, а в ней папку Шаблоны . Сомневаюсь, что без посторонней помощи Сусанин смог бы найти это место.

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

Как выбрать тему (шаблона для сайта)

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

Главное — не торопитесь с выбором шаблона. Советую: не жалейте времени, найдите действительно то, что Вам сильно понравится, и что потом Вам не захочется менять . Так же не забывайте, что все-таки сперва встречают по одежке, а уж после провожают по уму (большинство из нас покупает товар в красивой качественной упаковке и лишь после смотрит что в ней находится).

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

Как установить шаблон на WordPress

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

1. Скачали тему, проверили на вирусы и разархивировали, теперь повторяете те же действия, которые выполняли при копировании плагинов. Запускаете Total Commander, в левом окне находите папку с темой, для правого окна устанавливаете FTP соединение. Копируете папку с темой по адресу: public_html/wp-content/themes . Папку «themes» на , открываете и переносите в нее папку, выбранной вами темы с вашего. Все можно выходить из Тотала.

2. Теперь Вам нужно активировать выбранный шаблон. Для этого заходите в администраторскую панель (консоль). Осуществить вход можно так, как описано при (п.п. 2, 3.), либо через закладки (если Вы сделали в своем браузере закладку на админку). Далее нажимаем на вкладку «Внешний вид», и кнопку «Темы»:

3.Здесь активируете скопированную вами тему, путем нажатия кнопки «Активировать»:

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

Вот и все! Теперь выбранный вами шаблон на вашем сайте на WordPress активирован. Согласитесь даже интересно? Теперь можете посмотреть на то, как выглядит ваш сайт или блог (напоминаю, в адресной строке браузера вбиваете доменное имя своего сайта и нажимаете Enter).

Проверка темы (шаблона) на код с чужими ссылками или мы не дураки и тоже кое — что умеем.

Значит, установили Вы шаблон, но он может таить свои сюрпризы. Сюрпризы эти заключаются в том, что в теме могут быть ссылки на чужие сайты. Любой автор (обычно в подвале темы — файл footer.php) размещает ссылку на свои сайты или на сайты спонсоров. Это вполне нормально: не просто так же он работал. Что сними делать Вы вправе решать сами, можно убрать, а можно оставить или в место них поставить свои.

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

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

Для того, чтобы узнать есть ли в теме код , Вам понадобится плагин TAC (Theme Authenticity Checker) . Он должен находится у Вас на сайте, если Вы скачали и установили все на свой сайт. Плагин TAC ищет в теме WordPress ненужные ссылки и коды, работать с ним очень просто:

1. Входим в консоль (админка) находим: Внешний вид -> TAC:

2. Плагин автоматически определяет: в «нормальном» ли состоянии шаблон. И если найден код, то должно выйти примерно следующее:

Если написано «Theme OK!» на зеленом фоне, то в принципе все нормально, можно переходить к чтению следующей статьи, а если на красном фоне «Encrypted Code Found!» как у меня на скриншоте (картинке), то жмите «Details».

3. Здесь плагин показывает, что найден код (в рамке абракадабра), а над окошком с кодом указывается адрес файла, в котором он находится. У меня он находится по адресу и в папке в файле wp-content/themes/ваша тема (шаблон )/functions.php . Запоминаем путь и файл.

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

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

Процесс раскодирования кода в шаблоне

1. Я определил, где находится кодированный текст «functions.php» ,
далее переходим Внешний вид -> Редактор:

2. Нахожу в редакторе темы справа и жму на «Функции темы, functions.php» , Вы находите свою. Далее нахожу код и выделяю его.

3. Выделенный код копируем на один из предложенных ниже сервисов:

а). Идем в сервис по этой ссылке и ставим в поле дешифровки только содержимое апострофов:

4. На картинке третий сервис (в первых двух разберетесь сами, вставляете код жмете «декодировать» и копируете результат). На третьем сервисе тоже вставляете код в окошко и жмете «Send!»

5. На открывшейся странице нажимаете «Получить файл», выскочит запрос скачать, скачиваете файл (файл маленький скачаете быстро).

6. Скачанный файл открываете . Дешифрованный код у меня выглядит так, как на картинке, выделяем раскодированный код и копируем.

7. Теперь возвращаемся в редактор тем и вставляем в выделенный не раскодированный код. Находим в вставленном и раскодированном тексте строку: «fclose($fd); if (strpos($c, $l) = 0)» Получится примерно так:

8. В строек меняем значение «0 » на «1 «, что разрешит нам менять или удалять ссылки «fclose($fd); if (strpos($c, $l) = 1)» . И жмем внизу редактора обновить:

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

10. Все, переходим Внешний вид -> TAC и видим результат своей работы:

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