meta charset php bloginfo charset
Meta charset php bloginfo charset
Сборка собственного шаблона wordpress. Часть 3
Мы теперь видим наш сайт, но не можем менять содержимое. По сути, это все еще статичный html разбитый на несколько кусочков-файлов.
Не будем изобретать велосипед и возьмем на заметку файл header.php из шаблона twentyten.
Не будем брать оттуда ничего лишнего. Возьмем самое необходимое.
1. для начала определим язык, который используется на сайте с помощью wordpress:
заменим
2. укажем кодировку не явным образом, а через движок
3. далее рассмотрим тег title
берем все что есть в версии для шаблона twentyten
вместо
Больше раздел head в файле header.php нашего шаблона мы пока трогать не будем.
4. Идем ниже и в теге header нашего шаблона выведем название нашего сайта и краткое описание.
находим вот эту часть
заголовок h1 название сайта
заголовок h2 краткое описание
5. Мы добрались с вами до важной части шаблона, которая выводит меню в шапке.
в шаблоне twentyten находим строчку (103) и копируем ее в свой шаблон
меню, которое отображает пока только все страницы вашего сайта, но не рубрики и не записи.
для того, чтобы управлять нашим меню и составлять его по своему усмотрению — необходимо создать в папке нашего шаблона файл functions.php, в котором пока запишем:
и теперь в разделе «Внешний вид» \ «Меню» нашей админки мы сможем создать наше персональное меню.
Подводим итог 3 части
теперь наш файл header.php выглядит вот так:
В следующей части будем разбирать вывод записей нашего сайта.
Учебник по WordPress: Как создать тему WordPress из HTML (часть 1)
Если вы начали с веб-сайта HTML (+ CSS), вам не нужно все бросать при переходе на WordPress. Вы можете преобразовать свой HTML в WordPress и запустить свой (теперь более мощный) веб-сайт на динамической платформе WordPress.
А может, дело не в этом. Возможно, вам просто интересно, как преобразовать HTML-дизайн клиента в полноценную тему WordPress. Или, может быть, вы хотите изучить основы программирования WordPress (+ PHP) с более знакомой стороны HTML.
Какой бы ни была причина, по которой вы здесь сегодня, это руководство по WordPress познакомит вас с основами создания темы WordPress из HTML. Вы можете следовать этому руководству, чтобы создать свою тему с нуля, или вы можете перейти на Github и загрузить стартовую тему WPExplorer, которая предоставляет «пустой холст» для создания вашей темы со всеми необходимыми файлами шаблонов и кодом для начала работы. Так что, если вы один из тех людей, которые предпочитают учиться, читая код, загрузите стартовую тему, пропустите руководство и посмотрите, как все работает … В противном случае получите редактор кода (я использую и рекомендую Notepad ++ или SublimeText) и готовый браузер., а затем следуйте этому простому руководству до конца.
Именование вашей темы WordPress
Прежде всего, мы должны дать вашей теме уникальное имя, что не обязательно, если вы создаете тему только для своего веб-сайта. В любом случае, нам нужно дать вашей теме имя, чтобы ее можно было легко идентифицировать при установке.
Общие предположения на данный момент:
Вернемся к названию вашей темы WordPress. Откройте редактор кода, скопируйте и вставьте содержимое таблицы стилей в новый файл и сохраните его как style.css в папке темы. Добавьте следующую информацию в самый верх только что созданного style.css :
Не оставляйте теги комментариев (/ … /). Сохраните изменения. Эта информация сообщает WordPress название вашей темы, автора и тому подобные вещи. Важной частью является название темы, которое позволяет вам выбирать и активировать тему через панель управления WP.
Разбиение вашего HTML-шаблона на файлы PHP
В этом руководстве также предполагается, что ваш HTML-шаблон расположен слева направо: заголовок, контент, боковая панель, нижний колонтитул. Если у вас другой дизайн, возможно, вам придется немного поиграть с кодом. Это весело и супер просто.
Следующий шаг включает создание четырех файлов PHP. С помощью редактора кода создайте index.php, header.php, sidebar.php и footer.php и сохраните их в папке своей темы. На данный момент все файлы пусты, поэтому не ждите от них каких-либо действий. В целях иллюстрации я использую следующие файлы таблиц стилей index.html и CSS:
INDEX.HTML
CSS СТИЛЬНЫЙ ЛИСТ
Вы можете взять оба кода, если вам не с чем работать. Просто скопируйте и вставьте их в свой редактор кода, сохраните, создайте четыре файла PHP, о которых мы только что упомянули, и приготовьтесь к следующей части. Откройте ваш вновь созданный (и пустой) header.php. Войдите в существующую установку WordPress, перейдите в раздел Внешний вид – >> Редактор и откройте header.php. Скопируйте весь код между тегами и вставьте его в файл header.php. Ниже приведен код, который я получил из файла header.php в теме Twenty Fourteen:
Затем откройте файл index.html и скопируйте код заголовка (т.е. код из раздела
… В любом месте между тегами в файле header.php, чтобы связать вашу таблицу стилей. Не забудьте также поместить открывающие теги и в header.php, как показано выше. Сохраните все изменения.
Скопируйте второй раздел (т.е.
из index.html во вновь созданный index.php и добавьте…
… До абсолютного дна. Эти три строки извлекают header.php, sidebar.php и footer.php (в указанном порядке) и отображают их в index.php, который объединяет ваш код. Сохраните все изменения. На этом этапе ваш файл index.php должен выглядеть так:
Затем скопируйте содержимое из разделов боковой панели и нижнего колонтитула в index.html в sidebar.php и footer.php соответственно.
Добавление постов
Ваш HTML-шаблон скоро превратится в тему WordPress. Нам просто нужно добавить свои сообщения. Если у вас есть сообщения в блоге, как бы вы отобразили их в своей настраиваемой теме «HTML-to-WordPress»? Вы используете особый тип функции PHP, известный как цикл. Цикл – это просто специализированный фрагмент кода, который отображает ваши сообщения и комментарии, где бы вы его ни разместили.
Теперь, чтобы отобразить ваши сообщения в разделе содержимого шаблона index.php, скопируйте и вставьте следующий код между тегами
Это позаботится о ваших сообщениях. Легко, как азбука. На данном этапе (и с использованием примеров файлов, представленных в этом руководстве) ваш header.php должен выглядеть следующим образом:
Ваш sidebar.php должен выглядеть так:
Ваш footer.php должен выглядеть так:
Вы заметили закрывающие теги и в нижнем колонтитуле? Не забудьте включить их тоже.
Ваш style.css должен выглядеть примерно так:
И ваш index.php должен выглядеть примерно так:
Опять же – это основано на веб-сайте слева направо с заголовком, контентом, боковой панелью и макетом нижнего колонтитула. Вы следите? Все пять файлов должны быть сохранены в папке вашей темы. Назовите папку как хотите и сожмите ее в ZIP-архив с помощью WinRar или аналогичной программы. Загрузите новую тему в свою установку WordPress, активируйте ее и посмотрите, как преобразованная тема работает!
Это было легко, правда? Вы можете стилизовать свою тему по своему усмотрению, но большинство функций, которые нам нравятся в WordPress, все еще неактивны, так как… это руководство охватывает основы преобразования HTML-шаблонов в WordPress и должно иметь большое значение для вас, как новичка. В следующем уроке мы будем принимать вещи на ступеньку выше, и играть с другими аспектами программирования WordPress (например, файлы шаблонов и шаблонов теги), которые позволят вам превратить ваши шаблоны HTML Какой бы путь вы как. Оставайтесь в курсе!
Оптимизация блога — удаление лишнего кода в WordPress
Если вы занимались редактированием собственной WordPress темы, то, наверное, уже видели множество тэгов, выполняющих тривиальные задачи, например: вывод названия блога, кодировки сайта и т.п. Все эти данные можно задать непосредственно в самом шаблоне без вызова специальных функций. Бытует мнение, что за счет сокращения обращений к базе данных вы можете выиграть в производительности блога в целом. Правда, практические испытания некоторых блоггеров, показали, что сокращение времени загрузки ресурса незначительное. Тем не менее, считаю, данную оптимизацию полезной вещью — скорость вполне может ощущаться при слабых каналах связи или высокой посещаемости проекта.
Обновление 18.05.2018: Позже в другом блоге я публиковал пост про оптимизацию WordPress header с куда большим числом актуальных приемов. Также советую посмотреть обзор плагина Clearfy со множеством опций по улучшению работы данной системы.
Тема не один раз затрагивалась в рунете, но подробного описания я так и не заметил. Считаю, для тех, кто только начинает разбираться в WordPress нужно более глубокое рассмотрение данного вопроса. Собственно, поэтому и был создан данный пост. Продвинутые пользователи системы могут лишь проверить наличие ненужных php вставок у себя, пояснения можно не читать.
В заметке будут некоторые пояснения и реальные примеры (с моего блога). Думаю, не все мои читатели знакомы с рассматриваемой темой, поэтому, как говорится, приступим:
— отвечает за вывод данных о языке сайта и стране, где он располагается. Строка находится в header.php.
В данном случае запись lang=»ru-UA» означает, что текст сайта на русском, а сам находится в Украине.
и — первая часть кода задает значение параметра, заданного с помощью name или http-equiv, вторая определяет кодировку HTML документа. Находятся в header.php. Чтобы понятнее было посмотрим пример:
Было: ; charset= » />
Стало:
— выводит имя блога (в настройках админки поле Blog Title), встречается в шаблоне достаточно часто. Кстати, если вы используете плагин All in One SEO Pack, то он автоматически переписывает заголовки title, поэтому можете убирать из этого тэга весь код.
— версия системы, находится в header.php. Можно написать значение вашей версии вручную, указать любое другое, дабы запутать злоумышленника, или вовсе удалить строку.
— указывает файл стилей, находится в header.php.
— задает адрес RSS фида, может находиться в файлах header.php, sidebar.php и footer.php. Если вы используете FeedBurner, то пишите адрес именно от сервиса, а не стандартный.
— пусть к XML-RPC файлу, который отвечает за оповещение авторов других блогов, что вы на них ссылались. Находится в header.php.
— говорят, встречается в теме постоянно, хотя у себя не видел. Видимо, отвечает за путь к файлу стилей.
— задает описание сайта (в настройках админки поле Tagline), встречается в теме постоянно. Можно просто заменить на нужный вам текст.
— адрес фида (RSS потока) для комментариев, чаще всего встречается в sidebar.php и footer.php.
queries. seconds. —> — находится в footer.php, выводит количество запросов и время их выполнения. В принципе, особой необходимости в этом нет, поэтому можно смело удалять.
Код между строчками и в файле sidebar.php используется, когда в вашем блоге отключены виджеты. Если вам это не грозит — закомментируйте его или удалите.
Не исключено, что в темах (шаблонах) вы можете встретить многие другие php вставки с вызовом функций. Некоторые из них, думаю, можно будет спокойно заменить. Но для этого нужно понимать, что и как делает та или иная строка кода, иначе последствия могут быть не очень хорошие. Для подтверждения догадок можете смотреть результат выполнения функций прямо на страницах своего сайта, делая определенные выводы.
Наполняем файл header.php WordPress
Прописываем мета теги и функции в файл header.php WordPress
Итак, открываем и вставляем в header.php следующее содержимое ( пояснения по коду ниже):
Пояснения по вставкам в файл header.php WordPress
!DOCTYPE html — Начало HTML документа.
Так как мы будем использовать Bootstrap, этот мета тег я взял из стандартного HTML документа того-же Bootstrap.
Совместимость документа с мобильными устройствами.
Функция добавляет обычный тайтл, название страницы в файл header.php WordPress.
Если вы хотите выводить название страницы, а через черту название сайта, то вместо этого отрывка добавьте такой:
Поддержка микроформата, микроразметки.
В окончании создания шаблона WordPress сделаем микроразметку. Хотя дефолтные файлы в WordPress уже размечены.
Код, отвечающий за оповещение авторов блогов, на которых вы ссылаетесь, он направляет нас к XML-RPC файлу.
В консоли WordPress есть настройка оповещения авторов блогов, если ставить ссылки на их сайты. Не знаю, нужна или нет такая функция, но будем считать, что нужна.
Подключаем в файл header.php WordPress нашу таблицу стилей style.css
Пока стилевой файл подключаем напрямую, позже будем заполнять function.php и подключим как положено через него. А можно и оставить тут, это без разницы.
Поддержка HTML5 элементов и медиа размеров, точек прерывания в IE8, IE9.
Так-же скрипты будут работать только в IE8, IE9. Взял из Bootstrap документа, хотя в WP такая возможность так же реализована.
Если вникнуть и посмотреть документацию, то можно понять как управлять и где применять эту ОТЛИЧНУЮ функцию.
Выводит в файл header.php WordPress название сайта.
Выводит в файл header.php WordPress описание сайта.
Позже внесем изменения
Пока просто копируйте и вставляйте весь код целиком, позже, последовательно будем вносить в header.php изменения и дополнения. Некоторые дополнения мы внесем в через файл functions.php, например добавим RSS ленту и прочее.
Лучший способ отблагодарить автора
Похожие по Тегам статьи
Продолжаю цикл статей по переносу HTML верстки в WordPress. В прошлом занятии мы первоначально…
Разбираем и наполняем файл index php WordPress, знакомимся с некоторыми функциями и переносим часть…
Итак, мы уже подготовили минимально необходимые файлы для работы нашего учебного сайта. Теперь пришла…
5 thoughts on “ Наполняем файл header.php WordPress ”
Я читал посты ночью, с телефона — не помню в какой статье у вас видел что-то о скорости загрузки…
Но, тем не менее, дополню здесь: оптимизируя сайт, web-мастеру нужно всегда помнить (а не болезненно кастрировать своё детище. мы ж не в ветлечебнице))
Я к тому что пора бы учится требовать от провайдера отработку своих денег… и т.п. канители.
Интернет должен работать 30 дней в месяц. И хорошо работать…
И нужно чётко понимать причины, когда сайт туго грузится из-за ошибок, а когда из-за свинской работы уважаемых….
День добрый… извините, что с ответом замешкался… Много бестолковой работы одолело. Вероятно, сам такой.
Вот я и говорю, что подстраиваться и пилить свой сайт из-за нахально-о..шей братии хостеров, нужно только озираясь на будущее, которое, уверен всё расставит по местам. О Hostland мало слышал, а раз мало, или не слышал, значит чушь и пурга (в подобных случаях редко ошибёшься)
Я, уж как года …. на импортных. Песочница здесь и… (Ладно, подобные толковище не для подобной формы общения))
Мне всё fozzy предлагают (сервера как обычно — по миру), хотя я его и знал, но сейчас повторно проверяю.
Я не понимаю многого… например как люди могут терпеть, когда 18 часов нет доступа к сайтам, и это с завидной периодикой…
Видел своими глазами. А меж тем хостинг это как сердце или пламенный мотор, должны работать.
Посему культура адекватного предоставления услуг связи должна нами также освещаться.
Так что ускорение сайта ускорением, но и про ускоренный бег от подобных хостеров нужно не забывать.
t/s
Кстати, мне отчего-то на почту не приходили уведомления с Вашего сайта?
Хорошая статья. Как раз в тему. Делаю редизайн шапки сайта, кое что почерпнул для себя новое.
Да, статья отличная, можно кое что изменить на сайте.
WordPress.org
Displays information about the current site.
Contents
Description # Description
See also # See also
Parameters # Parameters
( string ) (Optional) Site information to display.
More Information # More Information
Displays information about your site, mostly gathered from the information you supply in your User Profile and General Settings WordPress Administration Screens. It can be used anywhere within a template file. This always prints a result to the browser. If you need the values for use in PHP, use get_bloginfo().
Source # Source
Related # Related
Uses # Uses
Retrieves information about the current site.