Анализ сайта: Проверка Траста

Редактирование темы wordpress (структура шаблона)

Автор: Рубрика: 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 у меня на блоге.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

изменяем footer

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

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

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

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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (3 голос., в среднем: 4,67 из 5)
Loading...Loading...
С уважением, Максим Войтик

  1. Элина

    Спасибо, Максим. Полезная статья =)

  2. сережа

    спасиб! очень полезно и очень доступно!

    есть проблема: блок подвала wp-шаблона сдвинут влево от остальной части! в php не силен( можешь помочь?

    • ВОЙТИК

      покажи пример шаблона, будем разбираться :)

  3. Николай

    Как изменит подвал, если там написано лишь

    <?php

    global $montezuma;

    echo bfa_parse_php ( $montezuma['subtemplate-footer'] );

    • Макс Войтик

      А где закрывающий тег ?> какой вы вобще файл открыли?

      • Николай

        Подвал

        (footer.php)

        • Макс Войтик

          скажите какой сайт и что вам нужно конкретно в падвале исправить?)

  4. Евгений

    1. Необходимо создать поиск по сайту на WordPress, который бы искал только по названию страниц, т.е по post_title в таблице WP_POST и/или по link_text, как это сделать?

    2. Возможена ли организация поиска на страницах по разным формам? Например, один поиск ПО НАЗВАНИЮ СТРАНИЦ, другое меню поиска ПО ТЕГАМ (Кластерам)?

    • Макс Войтик

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

      • Евгений

        Да, похожее на ПОИСК Google, но поиск по Google ищет слова и в самом тексте блога, а этого мне не нужно.

        На второй вопрос ВЫ не ответили :(

        • Макс Войтик

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

    • Макс Войтик

      Поздравляю вас. Вы оставили 500 комментарий на моем блоге и по условию конкурса вам полагается 100 рублей. Пришлите свой кошелек wmr мне на почту)))

  5. Руслан

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

    • Макс Войтик

      вам необходимо поставить тег <!--more--> в том месте текста статьи, до куда планируете отображать анонс статьи)))

  6. Руслан

    спасибо!

  7. саша

    Здравствуйте! хотел я убрать лишнии символы из сomments.php-но ничего не получилось-можете прислать полностью готовый код?

  8. Ольга

    Я только учусь сайтостроению. Макс, помогите пжл прописать код в подвале моего сайта. Желательно, чтобы было прописано следующее: Все права защищены. 2012 «Жили-были» — дом, семья, здоровье, быт.

    Буду очень Вам признательна! С уважением, Ольга. :smile:

    • Макс Войтик

      Замените этот код на следующий:

      Все права защищены < ?php echo date('Y');?>< ?php bloginfo('name');?>

  9. Евгения

    Здравствуй Максим!

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

  10. Анастасия

    Здравствуй Максим!

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

    Заранее спасибо

    • Макс Войтик

      Скажите название сайта...

  11. Анастасия

    он еще не запущен , но звучит как goldrush.com.ua

    • Макс Войтик

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

      • Анастасия

        простите , не совсем понимаю как вы это сделаете :oops:

        Я все редактирую через консоль wp .

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

        Что мне надо сделать, чтобы вы все увидели ?

        • Макс Войтик

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

  12. Александр

    Здравствуйте! А как убрать строчку:"Запись опубликована в рубрике Разговорный язык. Словарик... Добавьте в закладки постоянную ссылку."

    Она мне совсем не нужна.

    Спасибо!

  13. Сергей

    Здравствуйте!

    Подскажите пожалуйста! А вот надпись «Главная» — как редактируется? Например на "ГЛАВНАЯ! Я думал все в заголовке, но не нашел.

    Благодарю!

    • Макс Войтик

      Вы бы хотябы для начала указали ссылку на сайт, где нужно изменить надпись?

  14. Макс Войтик

    У меня надпись меняется в файле header.php, так как там она была предусмотрена шаблонам, а все остальные названия страниц меняются в административно панели блога, в меню «Страницы»...

  15. Nika Chick

    Добрый день, Макс! Спасибо за ваш пост :) Удалось поменять надпись в футере!

    Нужен ваш профессиональный совет. Использую шаблон Landscape wordpress theme. Хочется изменить формат заголовков: чтобы заглавной была только первая буква — как это сделать?

    И можно ли как-то уменьшить шрифт в заголовках постов? И расстояние между заголовком и датой публикации.

    Буду очень благодарна вам за ваши советы. Спасибо большое :))

  16. Сергей

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

    • Макс Войтик

      Вы можете не заполнять его в админке, а прописать в плагине all in one seo pack.

  17. Олег

    Здравствуй Максим. У меня такой вопрос — как поменять местами вкладки меню а то на шаблонах они отображаются в алфавитном порядке.

    • Макс Войтик

      Не знаю Олег, так как никогда меня не интересовал этот вопрос.

  18. Svetilla

    Наконец я изменила оформление сайта :oops: Статья очень полезна, особенно новичкам как я. Спасибо!

    P.S. Будет интересно ваше мнение, насколько все плохо :smile:

  19. rasology

    Люди добрые! очень надо php код для рекламного баннера джава-скрипта в подвал вордпресс. просто сил нет разбираться.

    есть баннер горизонтальный бегун где-то 90 на 60. и никак не вставить... плагины, виджеты не работают...

  20. Дмитрий

    Здравствуйте!

    Подскажите пожалуйста, куда обратиться с такой проблемой:

    Выбрал себе шаблон StarStruck, у которого шапка страницы сайта визуально расширяется по горизонтали до краёв экрана за счёт позиционирования с помощю style.css в теге body фоновой картинки методами: top left repeat-x. Весь остальной фон приобретает цвет, присваеваемый соответствующим атрибутом. Итог: атрибут выбора картинки фона занят украшением шапки, остальной фон имеет просто цвет, но не оформлен изображением. Хотелось бы: вместо цвета замостить весь оставшийся фон какой-либо картинкой.

    Что пытался сделать: с помощю фокуса CSS3 применить в стилях мультифон таким способом —

    body{

    border:0;

    padding:0;

    margin:0;

    font-family:Arial,Helvetica,sans-serif;

    font-size:12px;

    text-align:center;

    background: orange url (images/bg_header.gif) top left repeat-x, url (images/background_wood.jpg);

    }

    Метод не срабатывает, даже если я меняю в описании background местами ссылки на изображения и играю с описанием атрибутов, в результате одно из двух получается, либо мостится весь фон и пропадают аолоски по краям шапки, либо пропадают все фоновые изображения вообщеа фон становится просто белый. Может ли проблема заключаться в том, что тестирую сайт я не Денвере? Замучился и попробовал выбрать другой шаблон (fluidyellow), так напоролся там на точно такую же реализацию шапки. Как быть, спасите?!

    • Максим Войтик

      Привет Дмитрий! Вижу что у тебя отличные знания в css, советую тебе обратиться к фрилансерам они помогут за 5 секунд, только придется немножко заплатить. Советую использовать сервис free-lance.ru сам им пользуюсь.

  21. Александр

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

    • Максим Войтик

      Откройте файл шаблона single.php и удалите их от туда.

      • Ольга

        Здравствуйте, Максим, я тоже хочу убрать информацию в конце статьи ( admin), зашла в single.php, но не пойму что там надо править. у меня вот что там написано

        <div id="primary" class="col-md-8 ">

        Мой сайт где надо поправить kafeoda.ru/novosti Помогите, пожалуйста. спасибо.

        • Максим Войтик

          Так что-то сложно сказать, попробуйте убрать все содержимое между тегами <span class="post_author">...</span>

  22. Александр

    Вроде нашел. Только в файле loop-single.php. Спасибо за быстрый ответ :smile:

    • Максим Войтик

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

  23. Владислав

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

    <?php $options = get_option('themezee_options'); if ( isset($options['themeZee_general_footer']) and $options['themeZee_general_footer'] "" ) { echo $options['themeZee_general_footer']; } ?>

    вот подвал, помоги... :sad:

  24. Валентина

    Спасибо за статью. Статья полезная. Хорошо , если бы ВЫ написали статью о том , как сделать на странице блога вот такой перемещающийся листок , как на этой вашей страничке. Спасибо.

    • Максим Войтик

      Какой перемещающийся листок Валентин? Там где написано «Для посетителей»? Если вы про это, тогда я уже написал статью, как его сделать. Пользуйтесь поиском... называется ленточка на блоге.

  25. Владислав

    Макмим, так вы поможете или нет?!

    • Максим Войтик

      Я даже не понял, что вы от меня хотите? Ну выложили вы свой код, а от меня что нужно. Больше конкретики я же не умею читать мысли.

  26. Владислав

    Убрать надпись, надпись Theme by ThemeZee в низу сайта, она у меня вместо сайт работает на ворд пресс. т.е. заменить её! Помогите!

    • Максим Войтик

      Ты не пробывал убрать все, что расположено между этим классом <div class="credit_link">здесь стоит ссылка</div> если у тебя в файле footer.php больше ничего нет кроме того, что было в предыдущем комментарии, тогда я здесь не смогу помочь.

  27. Владислав

    вот всё...

    <?php

    $options = get_option ('themezee_options');

    if ( isset ($options['themeZee_general_footer']) and $options['themeZee_general_footer'] "" ) {

    echo $options['themeZee_general_footer']; }

    ?>

    • Максим Войтик

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

  28. Владислав

    нет все показываает,

  29. Татьяна

    Добрый день!Подскажите пожалуйста!Хочу уменьшить растояние шапки, где находиться название,тоесть над картинкой на теме Twenty Eleven,и еще возможно изменить размер шрифта в названиях страниц.Заранее Спасибо!

  30. Сергей

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

  31. Николай

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

    • Максим Войтик

      Возьмите файлы index.php или header.php откройте их в программе Notepad++ и выполните поиск этой ссылки по этим файлам. Если в коде найдет ее, то просто удалите и посмотрите результат.

      • Николай

        Нет ничего не нашел :sad:

        • Максим Войтик

          Тогда вспоминайте что вы сделали последнее, после чего эта ссылка появилась. Глядя на код могу предположить, что дело в плагине all in one seo pack. Попробуйте его деактивировать и посмотреть. Потом опять включите назад.

          • Николай

            Да Вы оказались правы, все дело в плагине All In One SEO Pack

            Спасибо разобрался, оказалось все намного проще чем казалось)

            • Максим Войтик

              Рад помочь. :)

  32. Yana

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

    В подвале он сделал грамматические ошибки.

    Я все это нашла в настройках, но не пойму как изменить...

    Я исправляю, обновляю страницу как вы пишите и все равно все остается как было.

    Может нужно где то изменить права, или нужна вообще специальная программа ?

    Возможно у меня слишком глупый вопрос, но прошу помочь

  33. Виталий

    Всеравно если не знаешь html и css без толку что-то пытатья редактировать, все темы разные и ни в одной статье не опишиш весь процесс изминения стилей шаблона.

  34. Владимир

    Добрый день. Подскажите, как убрать список страниц в шапке сайта.

    • Максим Войтик

      Если вы имеете ввиду меню, тогда нужно редактировать файл header.php

  35. Елена

    Максим, добрый день! Я вчера исправила по вашему примеру подпись в подвале. При нажатии на подпись получаю следующее: «Неприятная новость. Запрошенную информациюнайти не удалось. Возможно будет полезен поиск п сайту или приведенные ниже ссылки» что я сделала не правильно? Подскажите пожалуйста!

  36. Константин

    Здравствуйте, Максим. У меня вот какая проблема. Хотелось что бы новый текст появлялся ниже, а он вылезает сверху. Для блога это может и удобно, а у меня сайт по печкам. Получается начальная информация уходит вниз. Подскажите пожалуйста, как можно исправить?

    • Максим Войтик

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

  37. Андрей

    Здравствуйте помогите убрать в записях надпись"Рубрика:без рубрики",какие строчки в коде убирать и где? моя тема Snow Summit!Весь интернет перерыл,не могу найти ответ!помогите,очень надо!

  38. семен

    Привет! помоги пожалуйста убрать надпись сайт работает на ворд... тема Attitude, а вместо этого вставить рисунок ссылкой на главную страницу.

  39. Виталий

    по поводу style.css вы неправы, этот файл у меня в шаблоне решает внешний вид только малость в основном всё решает screen.css, в style.css только цвета и т.п

    • Максим Войтик

      У всех разные шаблоны.

  40. Ирина

    Помогите, пожалуйста! Как поменять заголовок шаблона на свой. Есть такие темы, что когда ее активируешь, прописываешь название, описание, чистишь кеш, а название темы остается то же. Что это? Например, мне нравится на ворд пресе тема RELAX. И оно никак не меняется. в других темах меняется, а в этой и еще некоторых не меняется. Или тема устаревшая?

  41. Анна

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

    • Максим Войтик

      В файле блога MenuMatic.css в классе #nav замените значение font-size на 1.

      #nav {

      border-bottom: 3px solid #000000;

      clear: both;

      display: block;

      font-size: 1px;

      margin: 0;

      overflow: hidden;

      padding-bottom: 9px;

      text-shadow: 0 1px 0 #FFFFFF;

      width: 946px;

      }

      • Анна

        Огромное спасибо, получилось! :smile:

        • Максим Войтик

          Пожалуйста, рад был помочь. )))

  42. Людмила

    Здравствуйте, Максим! Хочу выразить Вам огромную благодарность! Благодаря Вашим урокам по созданию блога я во многом разобралась! Подскажите, пожалуйста, как сделать чтобы в рубрике отображалось количество написанных записей?

    • Максим Войтик

      Спасибо Людмила. Если вы пользуетесь темами из паблика, тогда перейдите в раздел с Виджетами и в виджете «Рубрики» отметьте галочкой «Отображать число записей».

      • Людмила

        Спасибо Вам Максим! все получилось! Я Вам очень благодарна!!!



Оставить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Если вы решили все-таки оставить комментарий, обязательно ознакомьтесь с этими правилами комментирования!!! СПАМ будет удален!

Каждому комментатору книга в подарок!

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

Макхост - лучший хостинг за скромную плату

Интересное на блоге