Если вы здесь впервые, советую начать курс «Создание тем для WordPress» сначала. На прошлом занятии я показал вам, как установить локальный сервер Apache и MySQL базу данных, установить WordPress и вашу новую тему, и ознакомил вас с РНР. Сегодня мы продолжим рассматривать РНР и научимся вызывать заголовок вашего сайта или блога.
Я советую набирать код вручную. Если будете копировать и вставлять коды, которые я вам даю − не запомните как это делать самостоятельно. А ведь главное, чтобы вы запоминали то, что учите − в этом суть любого учебного курса. Готовы?
Шаг 1.
Включите Denwer. Затем откройте папку с вашей темой. Напоминаю, она находится в home/wordpress/www/wp-content/themes/tutorial. Там вы должны увидеть два файла, которые вы создали на прошлом уроке: index.php и style.css.
Содержимое данных файлов должно совпадать с файлами index.txt и style.txt соответственно.
Шаг 2.
- откройте новое окно браузера. Зайдите на http://wordpress/. вы должны увидеть пустую страницу, потому что вчера вы установили пустую тему;
- снова зайдите в папку с темой и откройте файл index.php в редакторе;
Сейчас у вас должны быть открыты папка с темой, браузер и файл index.php (открытый в редакторе).
Шаг 3.
В файле index.php, открытом в редакторе напечатайте:
<?php bloginfo('name'); ?> между тэгами <body> и </body>. Сохраните файл.
Обновите окно вашего браузера. Вы должны увидеть заголовок вашего блога. Заголовок моего − «Разработка тестовой темы».
Что произошло?
Вы добавили строку РНР кода в ваш файл index.php в области <body> вашей страницы. Эта строка вызвала информацию о вашем блоге, так называемую bloginfo(). В частности, строка вызвала заголовок вашего блога. Название, которое вы задали как заголовок на странице настроек.
<?php - начало PHP
bloginfo('name') – вызвать информацию о блоге, в частности его заголовок
; - конец оператора bloginfo
?> - конец PHP кода
Каждый раз, когда вы что-то изменяете в файле index.php, сохраняйте его, а потом обновляйте веб-страницу, чтобы изменения отобразились.
Шаг 4.
Чтобы преобразовать заголовок блока в текстовую ссылку потребуется XHTML тэг. Снова зайдите в файл index.php.
Добавьте <a href="#"> и </a> в ту же линию. Вновь созданная линия кода будет выглядеть так:
<a href="#"><?php bloginfo('name'); ?></a>
Вернитесь в браузер, обновите окно и вы увидите, что заголовок вашего блога стал ссылкой.
Сейчас это ссылка, но она никуда не приведет. Так как это заголовок вашего блога, думаю, вы хотели бы, чтобы он ссылался на первую страницу, ведь так? Чтобы сделать так, вставьте:
<?php bloginfo('url'); ?> в кавычках после href=
Сохраните файл, это должно выглядеть так:
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
Снова вернитесь браузер и обновите страницу. Теперь, когда вы наведете курсор на линк, в строке статуса будет указано http://wordpress/:
Сейчас, когда вы кликните на этой ссылке, вы попадете на первую страницу вашего блога. Пока вы увидите ту же самую страницу, но разница в том, какой адресс ссылки будет указан - # или http://wordpress/ - очевидна :)
Что сейчас произошло?
Вы преобразовали заголовок вашего сайта в ссылку на первую страницу вашего блога, или так называемую, домашнюю страницу.
bloginfo('url') - вызвать блогинфо, в частности адрес, или URL, первой страницы блога.
<a> - это XHTML тэг для открытия ссылки.
</a> - это закрывающий тэг для ссылки. Если этого тэга нет, ваша веб-страница не будет знать, где заканчивается линк, и остальная часть веб-страницы будет одним сплошным линком. Помните правило №1? Зыкрывайте все, что вы открываете.
href - это сокращенние от «hypertext reference /гипертекстовая ссылка». Все, что находится между значками "" атрибута href="" - это значение параметра.
Выражаясь словами, код:
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
означает: я начинаю ссылку, значение ссылки - это URL моего блога; я использую РНР функцию bloginfo('url'), чтобы вызвать его адрес; название(анкор) ссылки - это заголовок моего блога; я использую РНР функцию bloginfo('name'), чтобы вызвать заголовок моего блога; закрыть ссылку.
Сегодня я вводно ознакомил вас с функиональностью шаблона хедера, на этом я заканчиваю свой урок. Этого достаточно, чтобы вы не перегружали себя информацией.
Если у вас возникли вопросы, не стесняйтесь задавать их в комментариях.
Вопросов нет. Урок усвоил :)
А как долго планируется вести этот курс «Создание тем для WordPress»? Когда будет рассматриваться уже создание непосредственно дизайна?
Да и не очень понятно, зачем ориентироваться на людей, не знающих основ PHP, к примеру. Мне кажется, не нужно тут «разжовывать» все это. Достаточно будет, направить людей к мануалу.
jules, изначально проект предполагался как пособие именно для разработчиков. К сожалению среди нас нет профессиональных дизайнеров, поэтому нам нечего сказать по этому поводу. Но если вам интересна и эта тема, я думаю мы смогли бы договориться с профессионаьлными дизайнерами по поводу гостевых постов и начать двигаться в этом направлении. Спасибо за интерес к нашему ресурсу.
wp-admin, наверно, все-таки для начинающих разработчиков, потому что необходимый уровень для усвоения вашего курса (по крайней мере пока что) практически минимален :)
в 4 шаге когда я прописал <a href=””> у меня в статусной строке ссылка выглядела так: http:\\wordpress\[]Разработка тестовой темы[]
естественно такой ссылки быть неможет!!!!
У меня получилось с этим кодом:
<a href=”">
А у вас ошибка….точно… и скорее всего в
и почемуто в прошлом сообщении у меня все коды попропадали(((!!!!!
Владислав, это из-за того, что WordPress правит ковычки на свои.. проглядел.. спасибо, я исправлю это в ближайшее время.
Спасибо за урок! То, что нужно! Подробно и понятно.
Опечатка:
“Вы преобразовали заголовок вашего свеб-сайта в ссылку на…”
А как изменить ссылку в такой строке хедера:
<a href="”><img src="/images/nav1.jpg” alt=”home” />
вместо url нельзя вставить ссылку – не катит.
а нужно изменить ссылку картинки
Оля, адрес сайта, на который вы хотите поставить ссылку нужно поставить в href="", например <a href="http://wp-config.ru"><img src="/images/nav1.jpg" alt="home" /></a>
Вот нашла такое:
Если вам необходимо отобразить URL или веб-адрес вашего WordPress-сайта, используйте параметр URL. Он также берется из панели Параметры > Общие.
Но как вставить нужную мне ссылку?
Спасибо большое! Очень помогли!
Здравствуйте!
а у меня рядом со ссылкой появляется еще надпить о Сайте “имя сайта”
как это убрать?и почему это вообще появилось?
п.с. использую сборку WP
Ян, так сложно сказать – нужно смотреть.
И к тому же основная ссылка стоит в кавычках (но разных -
>
Скажите, пожалуйста, а если я хочу сделать ссылкой не само название сайта, а, скажем, слоган? Как вставить другой текст в код вместо bloginfo(‘name’)?
А вообще, спасибо большое за Ваши уроки! Очень все доступно для тех, кто совсем еще не в теме))
Наталья, просто окружите слоган тегами <a></a> и просто вместо bloginfo(‘name’) можете вставить любой текст прямо в код.
wp-admin, спасибо большое! )
З.Ы. Жаль, что у вас тут нет функции “ответить”, она удобна :)
Подскажите пжл, как сделать, что бы наименование блога (сайта) не являлось ссылкой.
Вроде всё понятно. А как не пытаюсь не получается!!
Ученик, уберите ссылку вокруг тега с bloginfo(‘name’).
Спасибо. Заблудился немного!)))
Просто Супер! Начинаю покорять, с вашей помощью, азы темостроения! Спасибо пока что вопросов нет.
ADMIN_WP! Родной! Не слушайте ни кого, продолжайте свое доброе дело. Совсем недавно, озаботился созданием собственного сайта и Ваш ресурс первый где все нормально, вменяемым языком описано. Не все имееют даже начальный уровень познаний в этом вродебы простом деле. Может я тупой совсем, но на сайте WordPress ничего не понял из описания. Так что спасибо Вам, и жду других уроков по WordPress.
Спасибо за самоучитель! Мои 5 коп: href – сокращение от двух слов Hypertext и REFerence (у Вас написано: href=”" – это сокращенно от «гипертекст» (hypertext).)
Павел, исправил на более точный вариант, спасибо.
Отличные уроки, всё чётко и ясно описывается АДМИНУ РЕСПЕКТ!!! =)
Пока всё просто и понятно, читаю дальше, мне б терпения не хватило так подробно описывать процесс ).
спасибо
<link rel="stylesheet" href="" type="text/css" media="screen" />Вввел и эмоций 0.фаил со стилем style.css