Недавно мой друг позвонил мне и спросил, могу ли я создать для него блог в самое ближайшее время. В ответ я принял и разработал способ создать для него функциональный блог, чтобы он мог писать страницы и посты. И, что еще лучше для него, сделайте это всего за 15 минут. Вот как вы можете сделать то же самое.
Шаг 1 Ослабьте свою рабочую нагрузку
Благодаря инструментам с открытым исходным кодом вам больше не нужно тратить часы на то, чтобы суетиться с сеточными системами, адаптивными шаблонами проектирования, перезагрузкой браузера или сложными файловыми структурами (темы WordPress). К счастью, теперь у нас есть возможность «отдать» тяжелую, скучную работу другим людям.
Если вы ищете быструю отправную точку или просто хотите сделать этот 15-минутный блог со мной, удобно использовать следующее.
- MAMP / XAMPP — Если вам надоело ждать загрузки файлов каждый раз, когда вы вносите изменения в дизайн, разрабатывайте свои сайты локально. MAMP (или аналог XAMPP для Windows) использует базы данных MySQL и Apache, чтобы обеспечить возможность установки локальных копий WordPress. Кроме того, любые файлы, которые вы перемещаете, почти мгновенно попадают в каталог, в котором вы их хотите — больше не нужно ждать вашего FTP-сервера.
- ZURB Foundation 3 — Хотите сетку, которая реагирует на мобильность? Как насчет форм, ползунков и других действительно полезных вещей, чтобы согласиться с этим? ZURB — самый гладкий и всеобъемлющий шаблон, который я когда-либо встречал. Стоит потратить время на его использование!
- Underscores.me — Раньше я настолько зацикливался на файловой структуре моих сайтов WordPress, что в итоге скачивал чужую тему и писал код поверх этого. Проблема в том, что это их код и не всегда хорошее место для начала разработки тем. Вот где Underscores.me вступает в свои права. Это дает вам базовую тему фреймворка без веса традиционных фреймворков. Это просто отличное место для начала, если вам нужны только некоторые базовые функции и простая архитектура тем.
Шаг 2 Включите все ваши файлы
После того, как вы загрузили все вышеперечисленное, убедитесь, что вы поместили их в один и тот же каталог, и вы определились с любыми дополнительными частями ZURB, которые вы, возможно, захотите использовать ( список дополнительных здесь )
Как только у вас будет полный каталог тем, откройте файл functions.php и сделайте ссылку на жизненно важные таблицы стилей, например:
|
1
2
3
4
5
6
7
8
|
function wptuts_styles() {
/** I’ve commented out the default style.css file.
wp_enqueue_style( ‘style’, get_stylesheet_uri() );
**/
wp_enqueue_style( ‘app’, get_template_directory_uri() . ‘/stylesheets/app.css’ );
wp_enqueue_style( ‘foundation’, get_template_directory_uri() . ‘/stylesheets/foundation.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘wptuts_styles’ );
|
Тогда вы можете начать использовать файлы, которые вы только что включили.
Шаг 3 Это в основном в вашей голове
Для базовой структуры вам действительно нужно только открыть свой header.php . Это отличная новость для быстрого развития.
Мы собираемся использовать два столбца, поэтому я буду использовать заголовок сайта в левом столбце и содержимое сайта в правом столбце. Фонд ZURB предоставляет нам блестящий способ быстро сделать макет. Нам просто нужно поместить наши divs / section / headers в строки из двенадцати столбцов, добавив классы в составные части.
В нашем примере я присвоил заголовку ширину в четыре столбца, добавив класс из четырех столбцов в элемент <header> и ширину в восемь столбцов (8 + 4 = 12) для области содержимого, которая является собираюсь сформировать мою правую колонку следующим образом:
|
1
2
3
|
<header id=»masthead» class=»site-header four columns» role=»banner»></header>
<div id=»main» class=»site-main eight columns»>
<!— This is the end of the header.php file —>
|
Это даст вам основную сетку из двух столбцов, которая уже отзывчива по своей структуре.
Шаг 4 Уборка дома
После того, как вы получили эту структуру, это дело уборки дома. Я сделал следующее, но вам не нужно:
- Удалены вспомогательные текстовые элементы, которые underscores.me включает по умолчанию. Если бы это был настоящий проект, я бы позаботился о том, чтобы они были видны только читателям экрана с помощью медиазапроса. Однако это всего лишь демонстрация, поэтому я вычеркнул две строки кода, которые были помечены для программ чтения с экрана в моем файле header.php .
- Та боковая панель и нижний колонтитул в правой колонке выглядят странно. Я просто взял их прямо.
- Если бы я работал на живом сервере, я бы также включил бесконечную прокрутку с помощью Jetpack, добавив эту возможность в мой functions.php . Однако локальная разработка (с использованием MAMP или аналогичного) и Jetpack не нравятся друг другу, поэтому я не смог добавить его на свой тестовый сайт.
Вывод
Ничего не поделаешь! У вас есть рабочий шаблон блога, который вы можете получить 0 онлайн за 15 минут. Насколько это хорошо?
Не забывайте, что это только базовый сайт — вы должны пойти дальше и добавить к нему свои собственные стили и стиль, если, конечно, вы не ищете что-то абсолютно базовое.