Главная - Без рубрики - Файл header.php — продолжение

Файл header.php — продолжение

Всем доброго времени суток!

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

Итак, я остановился перед тегом BODY в файле header.php шаблона, который мы изучаем — называется он o2.

Тег BODY — один из основных тегов HTML любого файла HTML или файла PHP для WordPress.

Как и у большинства файлов шаблона WordPress, этот тег начинается (открывается) в файле header.php а заканчивается чаще всего в файле footer.php. Внутри этого тега лежат все основные функции PHP нашего шаблона, а также все дивы файла стилей style.css.

Для изучения файлов PHP я советовал вам скачать и установить редактор кода Notepad ++ еще и потому (главная причина), что он подсвечивает не только код файла, он еще показывает нам где начинается и заканчивается тот или иной див. Смотрите картинку ниже. Вот кусок кода из файла, где после открытого тега BODY есть див HEADER. Если поставить курсор на открытии этого дива, но редактор покажет закрывающийся тег этого дива чуть ниже:

Нам сразу видно див HEADER, его начало и его конец, а также видно, какие еще классы свойств в него входят (в нашем случае дивы HEADER_R, HEADER_R_ADS, а также видны все функции кода PHP шаблона WordPress.

Давайте их коротко рассмотрим.

После открытия тега BODY есть два открывшихся дива — OUT и WRAPPER. При наведении курсора дивы не подсвечиваются, значит, в файле header.php они не заканчиваются. В таких дивах обычно записываются свойства, общие для всей страницы, которая будет выведена в браузере.

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

<a href="<?php echo get_settings(‘home’); ?>" title="<?php bloginfo(‘name’); ?>"></a>

а ниже — подключение файла searchform.php:

<?php include (TEMPLATEPATH . "/searchform.php"); ?>

 

Такой код — стандартный при подключении файла шаблона в определенном месте (в разговорном языке еще называют инклюд). Имя файла говорит само за себя — подключается файл формы поиска на сайте. Давайте посмотрим главную страницу и поймем, где мы сейчас находимся:

Стрелками я показал, какой код мы сейчас рассмотрели: заголовок слева и окно поиска справа.

У нас в рассматриваемом шаблоне вместе текстового заголовка выводится Логотип-картинка. Значит, что функция вывода текстового заголовка скрыта картинкой. Давайте в этом убедимся. Еще раз посмотрим код (см. выше). В диве HEADER есть див HEADER_L, который открывается и сразу закрывается. Это подсказывает, что он выводит картинку. Откроем файл style.css и найдем этот див.

Для просмотра и редактирования файлов CSS я привык использовать программу MS Front Page, она у меня открывается по умолчанию. Вы также можете использовать любой редактор, например тот же Notepad ++. Открыв программу, я через окно поиска ввожу нужный мне див — header_l и программа подсвечивает его, смотрите картинку ниже:

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

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

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

Если   мы перейдем на главную страницу и откроем исходный код, то увидим, что вывод заголовка оформлен так:

C помощью двух функций

<?php echo get_settings(‘home’); ?>" title="<?php bloginfo(‘name’); ?>

был послан запрос серверу, на что он ответил выводом текста заголовка — Коллекция WordPress.

Давайте откроем файл header.php и вместо этих функций напишем следующий код HTML:

<div id="header"><div id="header_l"></div>
<title>Коллекция WordPress</title>

Видите: вместо функций я поставил тег TITLE и внутри него написал заголовок сайта.

Теперь перегружаем главную страницу, открываем исходный код:

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

Теперь что касается Логотипа. Мы можем заменить картинку на текст. Для этого достаточно в файле стилей style.css удалить строку вывода картинки (рассматривали выше). Но для вывода текста автор не прописал свойства. Поэтому здесь надо включать знания CSS и пробовать настроить цвет, стиль шрифта и его размер и т.д. Я это делать сейчас и здесь не буду. Я просто изучаю вместе с вами код файла header.php и рассказываю — что и как здесь работает и для чего.

В конце — пару слов о окне поиска на сайте. У нас сейчас там выводится английское слово search. Давайте его удалим и вставим русское — искать. Открываем файл searchform.php (который через инклюд был подключен для вывода в заголовке), найдем в коде формы  это слово и заменим на русское — искать. Вот код файла:

</p>
<p style="text-align: justify;"><form id="search" method="get" action="<?php bloginfo(‘home’); ?>/" ><input type="text" value="search" onfocus="if (this.value == ‘search’) {this.value = »;}" onblur="if (this.value == ») {this.value = ‘search’;}" size="18" maxlength="50" name="s" id="s" />
</form>

Меняем слово, получаем:

 

<form id="search" method="get" action="<?php bloginfo(‘home’); ?>/" ><input type="text" value="искать" onfocus="if (this.value == ‘искать’) {this.value = »;}" onblur="if (this.value == ») {this.value = ‘искать’;}" size="18" maxlength="50" name="s" id="s" />
</form>

Сохраняем изменения. Перегружаем главную страницу. Теперь у нас слово искать — на русском.

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

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

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

Успехов!

О admin

4 комментария

  1. Кристина

    Из всех сайтов «WordPress для чайников» этот оказался для меня самым доступным :-))) Добавляю в закладки и начинаю досконально изучать! Спасибо за информацию!!

  2. Спасибо большое за такую подробную инструкцию! Только у меня возникла проблема, когда переименовывала строку поиска. Сделала все, как вы описали, но вместо слова «искать» в строке поиска теперь отображаются кубики. Как это исправить?

    • Я советовал пользоваться правильными редакторами. Вы сохранили изменения с режимом поддержки BOM сигнатуры, а нужен редактор, который этот режим умеет отключать при сохранении.
      Я всем советовал пользоваться редактором Notepad++, или немного хуже — UnicEdit. Во втором просто нет подсветки, за то отключение сигнатуры BOM в нем не надо настраивать.

  3. Так я и использовала Notepad++…

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

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

*