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

 Тема zeeStyle — изменить шаблон WordPress

изменить шаблон WordPressДумаете, что я куда-то опять пропала? Нет, я выходила за рамки зоны комфорта — при своей кодофобии, я училась, как изменить шаблон WordPress и ковырялась в кодах.

Если бы мне об этом сказали ещё 2-3 месяца назад, я бы не поверила! При словосочетании «коренная папка сайта» у меня мозги просто отключались. Как при наркозе. Или последней стадии опьянения! Щёлк — и я в отключке...
И дальнейшее восприятие материала было просто невозможным.

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

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

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

Удалить автора в WordPress. Удалить дату

1. Заходим в панель WordPress (Внешний вид — Редактор)
2. Находим в справа в списке файлов index.php
3. Ещё раз напоминаю — делаем его копию, если вы ещё не сделали (это очень важно!)
4. Открываем программу Notepad++ и копируем туда файл index.php. Скачать эту программу можно с официального сайта, запустить, выбрав язык – русский и нажимая несколько раз кнопку «далее».
5. После того, как скопировали файл, на клавиатуре одновременно нажимаем клавиши поиска Ctrl+F и в открывшемся маленьком окошечке вводим слово «author». При поиске в файле оно окрашивается в зелёный или жёлтый цвет. Рядом с ним располагается и «date».

6. Аккуратно выделяем и удаляем, как показано ниже:

<span class=«meta-date»><a href="<?php the_permalink () ?>"><?php the_time (get_option ('date_format')); ?></a></span>
<span class=«meta-author»><?php the_author () ?></span>

Удалили? В блокноте пока не сохраняем (это даст нам возможность, при некорректной работе файла, нажать в блокноте на стрелку «отмена» — вверху, под словом «Синтаксисы»).

7. Копируем и переносим на свой сайт вместо существующего файла index.php, в редакторе нажимаем кнопку «Обновить файлы» и переходим на сайт — смотрим, что у нас получилось. При правильном удалении строчек с кодами, на сайте должна исчезнуть надпись с автором и датой публикации. Если этого не случилось – возвращаемся в блокнот, нажимаем стрелку «отменить и начинаем всё сначала.

Смотрим здесь:
удаляем коды в шаблоне

Если у вас всё получилось, идём в блокнот, нажимаем на слово «Файл» и в списке находим «Сохранить, как» и в открывшемся окошке пропишем название «index.php».На всякий случай проверяем другие файлы (кнопка Ctrl+F) и вводим в окошечко слева слова – по очереди:

  • author
  • date

Я нашла необходимую для удаления строчку в файле author.php.

Теперь вы знаете, как удалить автора шаблона, как удалить дату в шаблоне.

Как изменить заголовок страницы с h2 на h1

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

Проверяем заголовок поста и заголовок шаблона, когда вы находитесь на Главной странице блога (не в админке). Нажимаем кнопки:
Ctrl+U
Ctrl+F
В окошко поиска вверху слева вводим h1 и смотрим, что будет отмечено зелёным цветом. Правильное значение h1 на Главной странице:

<h1>Название блога</h1>

Все остальные заголовки идут под тегом h2.

Теперь проверяем значение этих же показателей на странице с постом (нажав Читать далее).

Вот здесь и зарыта собака!!! Здесь правильным будет значение h1 только для названия поста (его заголовка). Название блога не должно быть между тегами h1.

В этом шаблоне темы zeeStyle пришлось корректировать h1 и h2 на странице поста, поскольку название статьи было между тегами h2 вместо правильного h1. Никак я не могла их поменять – не получалось… Теперь то я знаю – необходимо было прописать изменения в файле style.css.

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

Напоминаю – делаем копию всех файлов, с которыми будем работать:

файл single.php
файл header.php
файл style.css

Файл single.php отвечает за то, как будет выглядеть страница поста после нажатия кнопки «Читать далее».

Что меняем в файле single.php:

там находите:
<h2 class="post-title"><?php the_title (); ?></h2>
И меняете на:
<h1 class="post-title"><?php the_title (); ?></h1>
Всё! Больше ничего не надо!

Что меняем в файле header.php:

Открываете header.php, находим 25-ю строку (по крайней мере у меня она 25-я):
<a href="<?php echo home_url (); ?>/"><h1><?php bloginfo ('name'); ?></h1></a>

И меняете на:

<?php
if ( is_home () ) {
// Это главная страница
?>
<a href="<?php echo home_url (); ?>/"><h1><?php bloginfo ('name'); ?></h1></a>
<?php
} else {
// Это статья
?>
<a href="<?php echo home_url (); ?>/"><span><?php bloginfo ('name'); ?></span></a>
<?php
}
?>

Что меняем в файле style.css:

Находите там вот это:
/*=============== HEADER ===============*/
#logo {
float: left;
margin: 5px 10px 10px 10px;
}
#logo h1 {
font-size: 2.5em;
color: #fff;
font-family: 'Jockey One', Arial, Verdana, Helvetica;
}
#logo h2 {
font-size: 1.0em;
font-weight: bold;
color: #fff;
}

Добавляете то, что ниже выделено красным, в итоге этот блок получается таким:

/*=============== HEADER ===============*/
#logo {
float: left;
margin: 5px 10px 10px 10px;
}
#logo h1 {
font-size: 2.5em;
color: #fff;
font-family: 'Jockey One', Arial, Verdana, Helvetica;
}
#logo h2 {
font-size: 1.0em;
font-weight: bold;
color: #fff;
}
#logo span {
    font-size: 2.5em;
    color: #fff;
    font-family: 'Jockey One', Arial, Verdana, Helvetica;
}

Всё!

Можете снова сделать проверку заголовков на главной странице блога и на странице поста. У меня всё получилось! Ещё раз благодарю Александра Каратаева, автора блога «Огни большого города».

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

Как перевести WordPress тему

В шаблоне темы zeeStyle практически не было перевода на русский язык следующих слов:

автор
читать далее
комментарий
комментариев нет
свежие комментарии
добавить комментарий
отправить комментарий
архивы
рубрики

Перевод я делала вручную. По очереди открывала файлы темы шаблона и искала слова:
Read More, COMMENT, archive, author и другие, заменяя их русскими словами. Здесь важно проверить все файлы.

Вот пример, как поменяла комментарии (между тегами h3):

<div id="comments">

<h3><?php comments_number (__ ('Комментариев нет', 'themezee_lang'),__ ('Один комментарий','themezee_lang'),__ ('% комментарий','themezee_lang') );?></h3>

<?php if ( get_comment_pages_count () > 1 ) : ?>

<div class="comment_navi">

<div class="alignleft"><?php previous_comments_link () ?></div>

<div class="alignright"><?php next_comments_link () ?></div>

</div>

Важным был фрагмент кода:

% комментарий (смотрите в выше – выделен красным).

Именно он отвечал за надпись под статьёй «2 комментария». Тоже получилось не сразу…

Относительно изменений в надписях «комментарий» — ищите их в файлах comments.php, в archive.php, и — на всякий случай — в других файлах, набрав в поиске слово comments и исправляете, как сделано выше.

Как удалить чужие ссылки в подвале

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

ссылку на разработчика темы и ссылку на хостинг сайта. Если ссылка на разработчика спокойно удалялась (расположена между тегами <div></div>), то на хостинг – была спрятана. Удалось найти, поставив метку. В результате, удалила вот такой фрагмент кода после последнего </div> и перед закрытием тега
</body> в файле footer.php:

<?php wp_footer (); ?>

Изучила много разных способов удаления мусорных ссылок. Наиболее мне понравился:

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

Вообще, здесь может быть много нюансов, которые тянут на отдельную статью о декодере (если есть фрагмент (eval (base64_decode…), изменении параметра == 0 в functions.php (просто меняем цифру 0 на любую другую, например, 1 и удаляем ссылки) и другие способы.

Как изменить изображения в хедере

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

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

«Нажав кнопку «Добавить», можно загрузить и обрезать изображение по своему усмотрению, однако в вашей теме оформления рекомендуется заголовок размером 940 × 140 пикселей».

Если такой надписи с размерами рисунка в вашем шаблоне нет – ищите в теме папку «images», а в ней – картинку с шапки. Нажимаем на картинку правой кнопкой мыши, выбираем пункт «Свойства» и видим размер картинки.

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

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

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

  • Digital Westex Image Gallery (See «Header Art» category)
  • Free Header Images by 100pixel
  • Image * After — Free Stock Image Library
  • Stock.xchng — Free Stock Image Library
  • About.com's Webclipart Welcome, Headers, and Logos

Вот, пожалуй и все изменения в шаблоне темы zeeStyle. Были и разные мелкие изменения – размер основного шрифта, размер заголовков в файле style.css.
Это очень доступно описано у других авторов. Погуглите.

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

Ну, как я? Молодец?
Смогла!!!
Обращайтесь, я помогу и вам разобраться с редактированием файлов шаблона, заодно и потренируюсь!

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

А теперь — отвлекаемся от столь серьёзной темы и веселимся!!! Я смотрела видео и рыдала...

Отличного вам дня и прекрасного настроения!

Поделитесь с друзьями!!!

34 comments on “Как изменить шаблон WordPress

  1. Галина, а с помощью плагина CodeStyling Localization не пробовали сформировать файл перевода для темы?

    Комментариев нет', 'themezee_lang' — здесь themezee_lang обозначает text domain (текстовый домен), название файла, в котором тема будет искать перевод для соответствующих фраз. Плагин CodeStyling Localization позволяет быстро создать такой файл и переводить его прямо из админки блога. После перевода можно удалить плагин, а перевод останется.

    • Спасибо, Жанна, за подсказку плагина CodeStyling Localization. Я о подобном немного слышала, но захотелось самой сделать — ручками. Хочу немного ориентироваться в кодах... Постепенно научусь изменять шаблоны. Так интересно! И страшно всё равно!

  2. Молодец! Сама ко всему докопалась и сделала! Статью поняла не всю, так как она для меня на «иностранном» языке :), извини.

    • Пожалуйста, Андрей!

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

    • И не стыдно сеошнику, участвующему в SEO конкурсе, издеваться надо мну? Нулёвичком-первоклашкой?

      Вот правильно обиделся один товарищ крутой и с амбициями — тоже хотели над ним издеваться... :)

      Это так теперь называется, да? Кодер?

      Классно — я теперь кодерша... Так ещё не обзывали-величали!

      Короче — обращайся, если что... (как в мультике: ты заходи, если что!).

  3. Галина, я тоже также переводила несколько раз уже свою тему. Но она у меня постоянно обновляется после обновлений ВордПресса и приходилось всё заново переписывать.

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

    Ну те, которые похожие записи, хлебные крошки и в таком духе...

      • Галина, её разработчики постоянно после обновления ВП обновляют. Может там лучше что-то сделать хотят. Вот и тренируюсь!

        • Я что-то не понимаю, Софья. Да разработчики могут её обновлять, хоть каждый день, но — пока Вы на своём блоге не нажмёте кнопочку «Обновить тему» — она САМА не обновляется... И обновление Вордпресс к этому процессу отношения тоже не имеет...

          Или мы говорим о разных вещах.

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

            Галина. ведь постоянно что-то меняется, если оставить один раз поставленную тему, то могут накопиться ошибки или пропущу какое-нибудь важное обновление. Поэтому я лучше заново все H1 b H2 исправлю, я уже всё в блокнотик записала, что где искать, в каких файлах, а то за месяц- два забывается всё.

            В общем, мы об одном и том же. :)))))

  4. Галина поздравляю! Вы правы — главное иметь желание разобраться и всё получится. К тому-же бесценный опыт!

    При словосочетании «коренная папка сайта»

    Я так понял — это шутка юмора? :)

    Коренная — это лошадь в упряжке, а папка сайта может быть корневой... :)

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

  6. Галочка, отлично.

    Блог твой здорово преобразился. Я тоже люблю в кодах покопаться.

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

    • Приветствую, Наталья! Рада видеть в гостях и спасибо на добром слове!

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

      Но это — ближе к осени, сейчас многие на даче работу имеют — не до фотошопа.

  7. «На самом деле всё совсем не так, как кажется»

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

    «Коренная» папка — улыбнуло!

    Поздравляю, Галочка с освоением новых вершин!!!

    • Тут все улыбаются на эту папку!

      Приветствую, Ирина! При своей кодофобии я в самом деле много освоила на уровне любителя.

      До профи не дотяну да и цели такой нет!

      • Да и не обязательно быть во всём профи. Достаточно просто разбираться в вопросе. А профи быть в чём то одном. И у тебя это отлично получается!

  8. Здравствуйте! Такой вопрос — по умолчанию в заголовок можно ставить до 5 картинок включительно максимум. Где-то этот параметр регулируется? Чтобы поставить в случайном порядке сменяющие друг-друга 20-30 картинок.

    • Должен быть слайдер. Он у Вас есть в шаблоне? В шапке (heder)? Шаблон шаблону рознь и всё надо видеть. Если Вы совсем не разбираетесь — каждый раз делайте копию того, что меняете, чтобы в случае неудачи всё вернуть в том виде, что было до изменений. Бекап обязательно!

      Заочно подсказать не смогу. Очно — нет совсем возможности.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>