Рубрики

Разработка темы WordPress с нуля

sddefault

Вы знаете HTML, CSS и JavaScript. Вы можете делать красивые сайты. Может быть, вы слышали о WordPress, но не совсем уверены, как его реализовать или почему он может вам понадобиться.
Может быть, клиент попросил WordPress, но вы не очень знакомы с ним. Возможно, вы уже работали с ним раньше, но не знаете, как создать собственную тему с нуля. В любом случае, эта статья для вас.

Предпосылки

Все, что вам нужно для начала, это веб-сайт. Подойдет любой сайт. Вам не нужно знать PHP или иметь опыт работы с WordPress. Ваш веб-сайт может быть пользовательским или построен на Bootstrap / какой-то другой среде.

Вы действительно должны знать , как настроить среду локального сервера.

Цели

  • Установите WordPress локально
  • Возьмите существующий HTML-сайт и преобразуйте его в собственную тему WordPress.

Что может сделать WordPress для меня?

WordPress изначально создавался как платформа для ведения блогов, но теперь он известен как CMS - система управления контентом.

Любой веб-сайт, на котором вы собираетесь делать обновления, может воспользоваться CMS. Если это блог, вы хотите иметь возможность добавлять сообщения. Если это веб-сайт ресторана, вы хотите иметь возможность добавлять и обновлять меню. Если это веб-сайт компании, вы хотите иметь возможность обновлять цены, пакеты и так далее. Этот веб-сайт является пользовательской темой, работающей на WordPress. (С открытым исходным кодом тоже! )

Если кто-то платит вам за создание веб-сайта, это потому, что он не знает, как или у него нет времени заниматься кодом. Это должно быть максимально простым для клиента. WordPress может помочь со всем этим и не только.

Начало работы: дизайн

Я не могу не подчеркнуть, насколько не важно, что вы используете для своего дизайна — Bootstrap, Foundation, Skeleton, пользовательский CSS. Дело в том, что у вас есть сайт, и вам нравится, как он выглядит.

Я собираюсь взять существующий простой начальный шаблон и преобразовать его в WordPress для этой статьи.

Если вы просто хотите начать работу без Git, просто создайте на своем компьютере каталог с index.html и blog.css, и вы готовы к работе.

Установка WordPress

Есть много статей о том, как установить WordPress. Они заставляют процесс казаться длинным и пугающим, и в первый раз, когда вы делаете это, это может определенно сбивать с толку. Вот официальное руководство по настройке .

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

Создайте место для жизни на WordPress

Создайте где-нибудь пустой каталог на своем компьютере и укажите локальный или виртуальный хост на этот каталог.

Скачать WordPress

Перейдите на страницу загрузки WordPress и загрузите последнюю версию WordPress.

Разархивируйте WordPress

Разархивируйте WordPress и поместите содержимое папки в свой каталог.

Создать базу данных

Последние версии MAMP не поставляются с предустановленным phpMyAdmin. Вместо этого вы загрузите SequelPro на Mac или SQLYog на Windows — обе бесплатные программы. Чтобы войти в базу данных после загрузки, войдите на хост locahost(или 127.0.0.1), используя имя пользователя rootи пароль root. Остальные инструкции будут такими же.

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

Вы научитесь любить это сообщение. В MAMP, нажмите Open WebStart page. Найдите это около вершины:

Нажмите на phpMyAdmin. Нажмите Databases > create database. Я собираюсь позвонить в мой startwordpress . Это все, что вам нужно сделать в phpMyAdmin!

Настроить WordPress

Хорошо, последний шаг. Найти wp-config-sample.phpв вашем каталоге.

Не нервничай Измените имя базы данных, имя пользователя и пароль из этого:

WP-config.php
<span class="token comment">/** The name of the database for WordPress */</span> <span class="token function">define</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'DB_NAME'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'database_name_here'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/** MySQL database username */</span> <span class="token function">define</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'DB_USER'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'username_here'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/** MySQL database password */</span> <span class="token function">define</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'DB_PASSWORD'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'password_here'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

к этому:

WP-config.php
<span class="token comment">/** The name of the database for WordPress */</span> <span class="token function">define</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'DB_NAME'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'startwordpress'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/** MySQL database username */</span> <span class="token function">define</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'DB_USER'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/** MySQL database password */</span> <span class="token function">define</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'DB_PASSWORD'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Найдите это:

<span class="token variable">$table_prefix</span> <span class="token operator">=</span> <span class="token single-quoted-string string">'wp_'</span><span class="token punctuation">;</span>

И измените его буквально на что угодно с цифрами и буквами. Для обеспечения безопасности. xyz_или 735hjq9_ и т. д.

<span class="token variable">$table_prefix</span> <span class="token operator">=</span> <span class="token single-quoted-string string">'xyz77_'</span><span class="token punctuation">;</span>

Перейдите по адресу https://api.wordpress.org/secret-key/1.1/salt и замените весь «поместите здесь свою уникальную фразу» на этот сгенерированный код.

Сохраните файл как wp-config.php в вашем каталоге.

Теперь, когда вы вернетесь на свой веб-сайт и обновитесь, вы должны увидеть этот экран.

Вам нужно будет ввести несколько вещей — имя пользователя, пароль, адрес электронной почты, и тогда все готово. Поздравляем, вы успешно установили WordPress! Вы будете перенаправлены в /wp-login.php , где вы можете ввести свои учетные данные для входа в бэкэнд. Если вы перейдете на свой основной URL, вы увидите блог WordPress по умолчанию и сообщение «Hello, World!».

Создание вашей пользовательской темы

Вне настройки WordPress почти все, что вы делаете в WordPress, будет в wp-contentпапке; все остальное — основной код, и вы не хотите с этим связываться.

С этого момента WordPress Codex и StackOverflow станут вашими лучшими друзьями. Я покажу вам, как создать основную тему, но как вы решите настроить свои темы сверх того, что полностью зависит от вас.

В Finder следуйте по пути wp-content> themes, чтобы попасть в папку с темами. Вы увидите WordPress темы по умолчанию - twentyfifteen , twentyfourteen , twentythirteen - и index.php . Создайте новый каталог для вашей темы; Я назвал мой startwordpress .

Теме WordPress нужны только два файла - style.css и index.php .

В вашей пользовательской папке темы создайте style.css . Он просто содержит комментарий, предупреждающий WordPress о том, что тема существует здесь. Измените имя, автора, описание и так далее.

style.css
<span class="token comment">/* Theme Name: Start WordPress Author: Tania Rascia Description: Bootstrap Blog template converted to WordPress Version: 0.0.1 Tags: bootstrap */</span>

Помните исходный код блога Bootstrap из предыдущей статьи? Переместите эти два файла - index.htmlи blog.css— в свою пользовательскую папку темы. Переименовать index.htmlв index.php.

Ваша тема уже создана. Перейдите на панель инструментов WordPress и нажмите Appearance > Themes. Вы увидите тему в коллекции со всеми темами по умолчанию.

Активируйте тему и вернитесь на свой основной URL. Да, это так просто. Вы уже создали техническую тему. Конечно, он пока не делает ничего, кроме того, что может сделать статический HTML-сайт, но вы все настроены сейчас.

Есть одна вещь, которую вы можете заметить - blog.cssне загружается. Основные файлы Bootstrap CSS и JS загружаются через CDN, но мой локальный файл css не загружается. Зачем?

Мой локальный URL-адрес может быть startwordpress.dev , но он действительно извлекается из wp-content / themes / startwordpress . Если я ссылаюсь на blog.css с <link href="blog.css">, он пытается загрузить startwordpress.dev/blog.css , который не существует. Узнайте прямо сейчас, что вы никогда не сможете ссылаться на что-либо на странице WordPress без PHP.

Примечание. Chrome больше не поддерживает .devлокальные URL-адреса. Этот пример будет использовать .dev, но вы можете использовать .testили что-то еще на ваш выбор.

К счастью, это легко исправить. Есть несколько способов сделать это, но я покажу вам самый простой способ начать.

Найдите, где вы ссылались на таблицу стилей CSS в заголовке index.php . Вот как это выглядит сейчас , но нам придется это изменить.

<span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

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

<span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">get_bloginfo</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'template_directory'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span>/blog.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

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

Если вам не удалось загрузить CSS, нажмите «View Source» и найдите путь к вашему файлу CSS в коде. Это должно быть startwordpress.dev/wp-content/themes/startwordpress/blog.css . Убедитесь, что blog.css сохранен в правильном месте.

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

Разделение вашей страницы на разделы

Прямо сейчас все в index.php . Но очевидно, что мы хотим, чтобы верхний и нижний колонтитулы и боковая панель на всех страницах были одинаковыми, верно? (Возможно, некоторые страницы будут немного изменены, но это будет позже.)

Мы собираемся разделить index.php на четыре раздела - header.php , footer.php , sidebar.php и content.php .

Теперь мы начинаем вырезать и вставлять.

Все от <!DOCTYPE html>основного заголовка блога будет в заголовочном файле. Заголовок обычно содержит все необходимые стили заголовков и верхнюю навигацию к сайту. Единственное добавление, которое я сделаю к коду, это добавление <?php wp_head(); ?>непосредственно перед закрытием</head> .

header.php
<span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token punctuation"><</span>html <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>head<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>meta <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>meta <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>meta <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>meta <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>meta <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>author<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>title<span class="token punctuation">></span></span>Blog Template for Bootstrap<span class="token tag"><span class="token punctuation"></</span>title<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">get_bloginfo</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'template_directory'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span>/blog.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token comment"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --></span> <span class="token comment"><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">wp_head</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>head<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>body<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-masthead<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>nav <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-nav-item active<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-nav-item<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>New features<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-nav-item<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Press<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-nav-item<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>New hires<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-nav-item<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>About<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>nav<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>h1 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>The Bootstrap Blog<span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lead blog-description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>The official example template of creating a blog with Bootstrap.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>

Та же самая сделка для нижнего колонтитула как заголовок. Он будет включать в себя любой видимый нижний колонтитул, ваши ссылки JS (на данный момент) и прямо перед этим . Поскольку я включил div в заголовок, я собираюсь закрыть его в нижнем колонтитуле.<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">wp_footer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span></body>.container

footer.php
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token comment"><!-- /.container --></span> <span class="token tag"><span class="token punctuation"><</span>footer <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span>Blog template built for <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://getbootstrap.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bootstrap<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span> by <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://twitter.com/mdo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>@mdo<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Back to top<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>footer<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">wp_footer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>body<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>html<span class="token punctuation">></span></span>

У большинства веб-сайтов, особенно блогов, есть дополнительная область для включения контента, такого как архивы, теги, категории, реклама и тому подобное. (Содержимое удалено для краткости.)

sidebar.php
<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"col-sm-3 col-sm-offset-1 blog-sidebar"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"sidebar-module sidebar-module-inset"</span><span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span>About<span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span>Etiam porta <span class="token operator"><</span>em<span class="token operator">></span>sem malesuada magna<span class="token operator"><</span><span class="token operator">/</span>em<span class="token operator">></span> mollis euismod<span class="token punctuation">.</span> Cras mattis consectetur purus sit amet fermentum<span class="token punctuation">.</span> Aenean lacinia bibendum nulla sed consectetur<span class="token punctuation">.</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"sidebar-module"</span><span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span>Archives<span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>ol <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"list-unstyled"</span><span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token double-quoted-string string">"#"</span><span class="token operator">></span>March <span class="token number">2014</span><span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> More archive examples <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>ol<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"sidebar-module"</span><span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span>Elsewhere<span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>ol <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"list-unstyled"</span><span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token double-quoted-string string">"#"</span><span class="token operator">></span>GitHub<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token double-quoted-string string">"#"</span><span class="token operator">></span>Twitter<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>a href<span class="token operator">=</span><span class="token double-quoted-string string">"#"</span><span class="token operator">></span>Facebook<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>ol<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">/</span><span class="token punctuation">.</span>blog<span class="token operator">-</span>sidebar <span class="token operator">--</span><span class="token operator">></span>

Если на боковой панели находится вся вторичная информация, то на контент попадают все статьи и основное содержание веб-сайта. (Содержимое удалено для краткости.)

content.php
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>h2 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-post-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sample blog post<span class="token tag"><span class="token punctuation"></</span>h2<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-post-meta<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>January 1, 2014 by <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mark<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>hr<span class="token punctuation">></span></span> <span class="token comment"><!-- the rest of the content --></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span><span class="token comment"><!-- /.blog-post --></span>
Индекс

Индексный файл должен быть довольно разреженным. На самом деле, это должно быть только так:

<span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"row"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"col-sm-8 blog-main"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">/</span><span class="token punctuation">.</span>blog<span class="token operator">-</span>main <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">/</span><span class="token punctuation">.</span>row <span class="token operator">--</span><span class="token operator">></span>

Теперь мы собираемся добавить все обратно. Вот ваш новый index.php.

index.php
<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_header</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-8 blog-main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_template_part</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'content'</span><span class="token punctuation">,</span> <span class="token function">get_post_format</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token comment"><!-- /.blog-main --></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_sidebar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token comment"><!-- /.row --></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_footer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span>

Даже если вы никогда раньше не использовали PHP, этот код говорит сам за себя. get_header();get_sidebar();И get_footer(); все функции , которые ищут свои файлы .php и вставьте код. Конечно, все они идут внутри своих собственных <?php ?>тегов, чтобы сервер знал, что они анализируют их как HTML. Функция содержимого немного отличается, но делает то же самое.

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

Основные параметры

Прежде чем мы начнем загружать посты и страницы, нам нужно настроить некоторые основные параметры WordPress. Например, мой заголовок прямо сейчас — «Блог Bootstrap», жестко запрограммированный в HTML. Я хочу, чтобы <title>и <h1>мой сайт был изменяемым через серверную часть.

На панели инструментов перейдите к Settings > General. Установите свой заголовок.

В header.php измените содержимое тега title и основного тега h1 на этот код:

<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">get_bloginfo</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'name'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span>

И описание к этому.

<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">get_bloginfo</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'description'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span>

Наконец, я хочу, чтобы заголовок всегда возвращал меня на главную страницу блога. bloginfo('wpurl');это код, который будет делать это.

<span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">get_bloginfo</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'wpurl'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token comment"><!-- site title --></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>

Вот полный код на случай, если вы запутались.

<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>h1 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">get_bloginfo</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'wpurl'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token delimiter important">?></span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">get_bloginfo</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'name'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lead blog-description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">echo</span> <span class="token function">get_bloginfo</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'description'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span><span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>

Мы наконец сделали первое динамическое изменение на странице. Внешний интерфейс должен отражать то, что вы положили в свои настройки.

Теперь перейдите в Настройки> Постоянные ссылки . По умолчанию WordPress имеет значение Day and name , которое представляет собой действительно ужасную структуру URL. Нажмите на название сообщения и примените изменения.

Петля

Самое захватывающее — это возможность динамически вставлять контент, а в WordPress мы делаем это с помощью Loop . Это самая важная функция WordPress. Весь ваш контент генерируется через цикл.

На панели инструментов, если вы нажмете на «Сообщения», по умолчанию вы увидите сообщение «Привет, мир!». Наша цель — показать этот пост в блоге.

Сам цикл довольно прост.

<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token function">have_posts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">while</span> <span class="token punctuation">(</span> <span class="token function">have_posts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">the_post</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token comment"><!-- contents of the loop --></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">endwhile</span><span class="token punctuation">;</span> <span class="token keyword">endif</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span>

Это само по себе объясняет — ЕСЛИ есть сообщения, пока есть сообщения, ОТОБРАЖАЙТЕ сообщение. Все внутри цикла будет повторяться. Для блога это будет заголовок поста, дата, содержание и комментарии. Где должен заканчиваться каждый отдельный пост, там и заканчивается цикл. Мы собираемся добавить цикл к index.php.

Вот ваш новый индексный файл.

index.php
<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_header</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-8 blog-main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token function">have_posts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">while</span> <span class="token punctuation">(</span> <span class="token function">have_posts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">the_post</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">get_template_part</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'content'</span><span class="token punctuation">,</span> <span class="token function">get_post_format</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">endwhile</span><span class="token punctuation">;</span> <span class="token keyword">endif</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token comment"><!-- /.blog-main --></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_sidebar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token comment"><!-- /.row --></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_footer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span>

Единственная вещь в вашем цикле — это content.php , который будет содержать содержимое одного поста. Так что откройте content.php и измените содержимое на это:

<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>h2 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-post-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">the_title</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span><span class="token tag"><span class="token punctuation"></</span>h2<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-post-meta<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">the_date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> by <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">the_author</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">the_content</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span><span class="token comment"><!-- /.blog-post --></span>

Это удивительно просто! the_title();является заголовком сообщения блога, the_date();показывает дату, the_author();автора и the_content();содержание вашего сообщения. Я добавил еще один пост, чтобы доказать, что цикл работает.

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

Удалите все <li>файлы в разделе Архивы и измените их на этот код.

sidebar.php
<span class="token tag"><span class="token punctuation"><</span>h4<span class="token punctuation">></span></span>Archives<span class="token tag"><span class="token punctuation"></</span>h4<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>ol <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>list-unstyled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">wp_get_archives</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'type=monthly'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>ol<span class="token punctuation">></span></span>

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

<span class="token tag"><span class="token punctuation"><</span>h4<span class="token punctuation">></span></span>About<span class="token tag"><span class="token punctuation"></</span>h4<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>p<span class="token punctuation">></span></span><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">the_author_meta</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'description'</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span>

Теперь этот контент также загружается динамически.

Вот мой блог до сих пор.

Меню и страницы

Хорошо. Теперь мы знаем, как создать блог и редактировать контент на боковой панели. Остается только один главный аспект этой страницы — навигация и куда она ведет. Ну, есть два основных аспекта WordPress - сообщения и страницы . Они очень похожи в том, что они оба используют Loop. Однако на страницах вы размещаете контент, который не является блогом. Именно здесь возникает аспект CMS в WordPress — каждая отдельная страница может быть настроена так, как вы хотите.

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

header.php
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-masthead<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>nav <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blog-nav-item active<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">wp_list_pages</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'&title_li='</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>nav<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>

wp_list_pages();перечислит все страницы, которые у вас есть в неупорядоченном списке. 'title_li='говорит коду не добавлять заголовок «Страницы» перед списком. К сожалению для нас, это выглядит ужасно; исходный blog.css содержит ссылки, закодированные в aтегах, а не в liтегах.

К счастью, это очень легко исправить. Я просто собираюсь применить стиль от одного к другому. Добавьте это к blog.css

blog.css
<span class="token selector"><span class="token class">.blog-nav</span> li </span><span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token class">.blog-nav</span> li a </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>

Теперь это должно отображаться правильно. Однако, если CSS не применяется, просмотрите исходный HTML- код и узнайте, каков URL вашего CSS. Так и должно быть startwordpress.dev/wp-content/themes/startwordpress/blog.css. Обязательно сделайте жесткое обновление .

Намного лучше.

страницы

Я хочу, чтобы страницы имели разный макет, чем посты в блоге; Я не хочу боковых панелей на них. Думайте index.phpкак блог-индекс и page.phpкак индекс страницы. Я собираюсь создать page.php, который будет очень похож на индекс, за исключением того, что будет иметь полную сетку из 12 элементов вместо содержимого с 8 элементами и боковую панель с 4 элементами.

page.php
<span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_header</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token function">have_posts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">while</span> <span class="token punctuation">(</span> <span class="token function">have_posts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token function">the_post</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">get_template_part</span><span class="token punctuation">(</span> <span class="token single-quoted-string string">'content'</span><span class="token punctuation">,</span> <span class="token function">get_post_format</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">endwhile</span><span class="token punctuation">;</span> <span class="token keyword">endif</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token comment"><!-- /.col --></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token comment"><!-- /.row --></span> <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token function">get_footer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span>

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

Заключение

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

Если что-то неясно, пожалуйста, дайте мне знать. Если я разместил явно некорректную информацию, пожалуйста, дайте мне знать! Любая обратная связь с благодарностью! Моя цель состояла в том, чтобы сделать статью, которую я хотел бы иметь передо мной, когда я впервые начал изучать, как использовать WordPress и PHP.

Также читают

Понравилась статья? Поделись с другом!!!

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

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

18 + 16 =