Сайт о телевидении

Сайт о телевидении

» » Как сделать уникальный шаблон для wordpress своими руками за час. Меняем название папки с темой. Как называть шаблоны страниц

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

Привет, дорогие читатели!

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

Выбор тематики. Как загрузить WordPress на компьютер?

На следующем этапе вы можете приступить к созданию блога самостоятельно, используя известные вам языки программирования. Но этот путь под силу только опытным программистам. Поэтому в нашем распоряжении есть готовые системы управления (CMS). Среди них самые известные Joomla, Drupal и, конечно, WordPress. Поскольку мой блог посвящен и создан на Вордпресс, то дальше речь пойдет именно о нем.

Для начала на официальном сайте ru.wordpress.org скачайте платформу WordPress (последнюю русскоязычную версию этой CMS).

Локальный сервер для WordPress

Этот пункт можно пропустить! Многим проще сразу начать разработку на хостинге, но я привыкла создавать сайты у себя на локальном сервере, а только затем переносить на хостинг.

Приступим к установке Денвера. Это программа, которая позволит создать локальный сервер на своем компьютере. С его помощью вы сможете до загрузки сайта в сеть разобраться с движком, разработать стиль блога, протестировать площадку. Кроме того, он вам понадобится и в дальнейшем, если вы захотите работать над сайтом удаленно, не боясь поломать его основную версию.

Как создать контент для блога?

После того как дизайн выбран и доработан, а блог настроен, пора перейти к наполнению его информацией. Идеальный вариант наполнения сайта – создавать контент самостоятельно. Тогда он будет уникален не только по форме, но и по содержанию. Но не всегда на это хватит сил и фантазии. Если так случилось, то есть несколько вариантов:

  • Переводить иностранные тексты по вашей тематике;
  • Делать копирайт, основываясь на информации из разных источников;
  • Нанять копирайтера, который будет делать это за вас.

Основное требование к содержанию постов – это их доступность и актуальность для читателей.

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

Пошаговая инструкция создания блога: домен и хостинг

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

Однако даже если вы промахнулись с выбором хостинг-провайдера или регистратора, не отчаивайтесь. Всегда можно , или к другому регистратору доменных имен. В статье о переносе на хостинг вы также узнаете, как перенести сайт с денвера на новый хостинг. Для оперативной работы и добавления файлов на удаленный сервер лучше пользоваться файловым менеджером хостинга или FTP-клиентами, такими как или . После того, как вы зарегистрировали доменное имя и залили свой блог на хостинг, ваш сайт появится в сети Интернет.

Надеюсь, данная инструкция по создания сайта на WordPress с нуля была вам полезна. Делитесь своими находками и впечатлениями.

Предлагаю посмотреть видео. Оно на английском языке, но зато как раз отвечает на вопрос сегодняшней статьи: как создать блог на Вордпресс самостоятельно.

В следующем обзоре мы разберем основные способы монетизации блога. Подпишитесь на рассылку по форме ниже, чтобы не пропустить. Всем удачи!

P.S. Вчера решила почистить старый ноутбук от пыли внутри, разобрала, а собрать обратно не могу. Вот беда, что же делать?

Сейчас объясню, как сделать из простого HTML-шаблона тему WordPress на примере дизайна из той статьи.

Адаптировать дизайн под WordPress может понадобиться по многим причинам, например, вы переносите на CMS свой некогда статичный сайт, или вам понравился дизайн, которого в коллекции WordPress ещё нет, или вы просто хотите разобраться, как устроены темы этой CMS изнутри.

Итак, приступим.

Распределяем код по файлам

1. Скачайте шаблон и распакуйте его в папку с темами WordPress (адрес вида адрес_блога_wordpress/wp-content/themes/ ). Если хотите, переименуйте папку с темой на свой вкус. Например, у меня шаблон располагается по адресу адрес_блога_wordpress/wp-content/themes/MyTheme/ .

2. Переименуйте файл styles.css в style.css .

3. Откройте style.css в редакторе кода (таком, как Notepad++) и в самое его начало вставьте следующие строки:

/* Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */

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

4. Создайте файлы header.php , index.php , sidebar.php , footer.php и распределите по ним код из index.html .

4.1. В header.php скопируйте код по строчку , так как этот файл отвечает за верх сайта. styles.css замените в коде на style.css - новое корректное имя файла.

4.2. В index.php вставьте код основного блока (со строки по строку ).

4.3. В sidebar.php скопируйте код бокового меню (с по ).

4.4. В footer.php вставьте оставшиеся строки (с до конца документа index.html ).

5. Удалите index.html .

6. Перейдите в админ-панель и убедитесь, что шаблон MyTheme появился в разделе Внешний вид -> Темы . Вы даже можете попробовать его просмотреть или активировать, но ничего хорошего из этого пока не получится, ведь шаблон с WordPress мы ещё никак не интегрировали.

Адаптируем header

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

В шаблоне будут встречаться PHP-вставки. Начинается такой код с . Между ними расположен PHP-код, чаще всего вызывающий функции CMS

1. Откройте файл header.php и замените содержащийся в нём код до блока

на следующий:

> "> "> " type="text/css" media="screen" /> <?php bloginfo("name"); ?>

Мы сделали динамическим блок

Код вызывает функцию, возвращающую языковые атрибуты в контейнер.

">

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

Важная функция, обеспечивающая работу на странице стилей, плагинов и скриптов.

2. Перейдите к редактированию файла index.php. В самом его начале пропишите

,

Строчки вызывают файлы шапки, боковой панели и низа сайта.

Теперь вы можете просмотреть или даже активировать MyTheme. В результате браузер отобразит уже знакомый шаблон со статическим меню и одной-единственной страницей. Чтобы меню стало динамическим и настраиваемым, а вместо одной страницы отображались все помещённые на сайт материалы, нужно преобразовывать шаблон дальше.

Делаем динамическим верхнее меню

Пока мы имеем полностью статическую тему оформления, в том числе и с неизменным горизонтальным верхним меню. Пока его нельзя настроить из админ-панели, и если оставить код в нынешнем виде, то для вставки/удаления/переноса пунктов придётся каждый раз редактировать файл header.php , что крайне неудобно.

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

так, чтобы получилось следующее: