Создание сайта на wordpress с нуля для начинающих

Всем привет, появилась свободная минутка, решил написать обширную статью о том, как создать сайт на wordpress. Для опытных программистов – дело не хитрое, а вот у начинающих создание сайта на wordpress с нуля может вызвать уйму вопросов.

Первая часть.

 

Навигация по странице: wordpress создание сайтов для начинающих

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

Для описания всех действий, предлагаю вместе создать сайт визитку, с рубрикой новости + поместить ее в сайдбар нашего сайта. Более подробно, что такое wordpress визитка описано в этом посте, ссылка откроется в новом окне.

Техническое задание: создание сайта на wordpress с нуля для начинающих

к менюWordpress визитка будет иметь такие разделы:

  1. Главная страница.
  2. Страница page: "О нас", "Контакты".
  3. Рубрика category: "Новости".

Тестовая сайт визитка будет иметь такие блоки страницы:

  1. Шапка (header) - верхняя часть сайта.
  2. Основной контент midl.
  3. Футер (footer) - нижняя часть сайта.

Далее, я подробно опишу какие элементы будут в каждом блоке.

  • В шапке сайта должен находится: логотип, меню, контактная информация.

    Логотип – с левой части макета.

    Меню – с правой части.

  • Средняя часть макета должна делится на 2 колонки: слева узкая - сайдбар, и справа широкая для динамического контента.

    В сайдбаре будет размещено 3 последние новости с сайта.

    В правой части будет контент страницы: заголовок, текст, изображение.

  • В футере сайта будет находится только текстовый блок copyright. Через весь сайт по ширине.

Техническое задание на тестовый сайт готово. Создание сайта на вордпресс, да в принципе и не только на нем должно всегда начинаться с ТЗ, что бы не было лишних вопросов 🙂 

 

Как создать сайт на wordpress

к менюПриступим к созданию сайта на wordpress. Для этого нам нужно иметь макет и верстку наших страниц.

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

Начал искать у себя в загашниках подходящею верстку, и понял что она слишком скучная. В итоге, пришлось набросать малость хтмл тегов специально для этого примера :).

Вот такая несложная верстка у меня получилась:

как создать сайт на wordpress

В этой верстке можно подсмотреть стили CSS как растянуть меню на всю ширину, а также как прижать футер к нижней части сайта (когда то опишу эти моменты по подробнее, а сейчас к нашей теме).

Сайт статический, но благодаря несложной конструкции его можно легко переделать под адаптив, если кому нужно.

Учится создавать сайт на wordpress будем на этой верстке, скачать Html макет вы можете по этой ссылке: http://help-wp.ru/wp-content/uploads/2019/12/testsite.zip

Он нужен вам для понимания, что мы будем делать. Я не буду выкладывать сюда чистый хтмл дабы не путать его с частями шаблона.

Ну что, скачали макет, посмотрели, разобрались? - теперь нам нужно сделать сайт визитка своими руками.

 

Пошаговая инструкция создание сайта на вордпресс

к менюКак говорилось выше, сегодня я научу вас как создать сайт визитку на wordpress своими руками, согласно ТЗ выше.

Для этого у вас должен быть какой нибудь редактор хтмл / пхп, я например использую Adobe Dreamweaver CC 13 версии. Вам, в качестве альтернативы, могу посоветовать Notepad++ (ссылка откроется в новом окне. В этой записи есть ссылка на скачивание и краткая инструкция), хотя я больше привык к дримвьюверу.

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

Важный момент: все файлы, которые мы будем делать в пошаговой инструкции, нужно сохранять в кодировке UTF-8 без BOM.

Notepad++ есть вкладка "кодировка" и он умеет сохранять в этой кодировке, а вот Dreamweaver нужно настраивать.

Создание сайта на wordpress - не сложная, но хлопотная задача. Наберитесь терпения и следуйте инструкции ниже. Можно перейти к скачиванию шаблона и пропустить его создание.

Создание сайта на wordpress по шагам

1) Создаем папку "shabtestsite", в любом свободном месте вашего диска.к меню

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

2) В отдельном окне открываем папку со скачанными хтмл файлами, надеюсь вы их распаковали из zip архива 🙂 . Папка тут называется "testsite"

3) Находим и копируем из папки "testsite" файл "style.css" в папку "shabtestsite". А также копируем папку "img" в "shabtestsite" создание сайта на wordpress.

4) Открываем файл "style.css" в каталоге "shabtestsite" и забрасываем туда в самое начало вот такой код:

/*
Theme Name: Test-Site
Description: WordPress themes by Help-WP.ru
Author: Help-WP.ru
Version: 1.0
*/

Смотрите как на скине (откроется поверх всех окон в просмотре):

создание сайта на wordpress
Этим кодом мы сообщаем WordPress название нашего шаблона, его автора и версию. Без этого файла шаблон работать не будет.

Файл "style.css" оставляем открытым, он нам нужен в следующем шаге.

5) Продолжаем править "style.css". Теперь нам нужно забросить в конец стилей вот такой код:

.aligncenter, div.aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto;
 }
 .alignleft {
 float: left;
 margin-right:20px;
 margin-bottom:15px;
 }
 .alignright {
 float: right;
 margin-left:20px;
 margin-bottom:15px;
 }
 .wp-caption {
 margin: 10px;
 padding-top: 4px;
 text-align: center;
 }
 .wp-caption img {
 border: 0 none;
 margin: 0;
 padding: 0;
 }
 .wp-caption p.wp-caption-text {
 font-size: 11px;
 line-height: 17px;
 margin: 0;
 padding: 0 4px 5px;
 }
 .wp-pagenavi{
 padding:30px 0px 5px 0px;
 font-size:14px;
 text-align:center;
 }

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

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

6) На этом, файл "style.css" можно сохранить и закрыть, пока мы его править не будем. Вот так у меня сейчас выглядит каталог "shabtestsite": пошаговая инструкция создание сайта на wordpress

7) Работаем дальше, теперь нам нужно в нашей папке шаблона "shabtestsite" создать текстовый файл "header.php" в кодировке, как я писал ранее utf-8 без BOM. Делается это очень просто, достаточно войти в нотепад ++ или дримвьювер, нажать на первую вкладку файл, потом выбрать создать. Далее, если кодировка отличная от utf-8 мы можем просто перекодировать, выше я писал как это сделать.

8) Файл "header.php" оставляем открытым, если закрыли то открываем заново. Также из папки "testsite", где у нас хтмл макет лежит, нам нужно открыть файл "index.html".

9) В файле "index.html" выделяем код от начала до тега "<div id="midl">", как на рисунке и копируем его. Вставляем этот кусок в файл "header.php", в самое начало.

10) Теперь нам нужно сделать пхп вставки в "header.php" для вывода динамического контента, что б создать сайта на wordpress.

10.1) Найдите код "<title></title>": сюда мы должны добавить функцию wp_title() - для вывода СЕО заголовков наших страниц. Вот так получится:

<title><?php wp_title();?></title>

10.2) Найдите код "<link href="style.css" rel="stylesheet" type="text/css">": здесь нам нужно прописать абсолютный путь к теме, а конкретно к стилям. Для этого вызовем функцию bloginfo( 'stylesheet_directory' ) с таким параметром. Будет вот так выглядеть:

<link href="<?php bloginfo( 'stylesheet_directory' ); ?>/style.css" rel="stylesheet" type="text/css">

10.3) Также, перед закрывающимся тегом "</head>", нам нужно вставить вот такой кусок кода:

<?php wp_head();?>
- он нужен для вывода и подключения скрипторв, стилей ,настроек плагинов и темы.

10.4) Дальше ищем код "<a href="#" id="logo"><img src="img/logo.png" alt=""/></a>" и для ссылки с логотипа ставим bloginfo('url') (на главную), а для изображения опять прописываем абсолютный путь, как мы делали для стилей в п. 10.2. Вот так получится:

<a href="<?php bloginfo('url'); ?>" id="logo"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/img/logo.png" alt=""/></a>

10.5) Ищем тег "<nav id="nav1">", выделяем все до закрывающего тега "</nav>" и удаляем все что у нас внутри. На место удаленного кода мы вставляем функцию wp_nav_menu, вот так должно получиться:

<nav id="nav1"><?php wp_nav_menu( array('theme_location' => 'menu1', 'container'=>false, 'depth'=>'1', 'echo'=>'1')); ?></nav>

11) Сохраняем файл "header.php" и проверяем с моим скином, должно выйти один в один вот так (код не добавляю, в конце будет архив шаблона для скачивания целиком): создание сайта на вордпресс12) Можем закрывать файл "header.php", предварительно все сохранив.

13) Аналогично п.7, создаем в каталоге "shabtestsite" файл с именем "page.php".

14) Из уже открытого файла "index.html" нам нужно скопировать весь хтмл код, начиная с "<div id="midl">" до "<div id="footObm"></div>". Сначала выделяем, потом копируем, как мы это уже делали. wordpress создание сайтов для начинающихСкопированную часть нужно вставить в файл "page.php".

14.1) Самая первая пхп вставка - <?php get_header(); ?> для подключения файла "header.php" к странице типа page. Вставку нужно сделать на первую строку.

14.2) Находим тег "<div id="page">" и после него вставляем:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
- это наше начало основного цикла WordPress. Тут будем выводить динамический контент в перемешку с хтмл тегами.

14.3) Далее, нужно найти "</div><!--page-->" и перед ним закрыть цикл вот таким кодом:

<?php endwhile; endif; ?>

14.4) Вместо вот такого хтмл "<h1>Заголовок</h1>", вам нужно вставить динамический вывод заголовка страницы

<h1><?php the_title();?></h1>
. (Не путать плз. с СЕО заголовком. Это разные вещи.)

14.5) Находим начало "<div id="txt">" и его окончание "</div><!--txt-->". Весь текст и код между началом и концом нужно удалить, а на его место вставить вывод контента страницы, вот так получится:

<div id="txt"><?php the_content(''); ?></div><!--txt-->

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

<?php get_footer(); ?>

14.7) По аналогии с п.7, в "shabtestsite" создаем файл с именем "sidebar.php".

14.8) Создание сайта на wordpress продолжается, в файле "page.php" нам нужно выделить и скопировать блок, который начинается с "<div id="left">" и заканчивается "</div><!--left-->". Вот он: wordpress создание сайта бесплатноВставляем этот код в файл "sidebar.php", и пока оставляем его.

В файле "page.php", на место выделенного кода, нужно вставить вот такой код подключения сайдбара:

<?php get_sidebar();?>

14.9) Сохраняем файл "page.php", который сейчас должен у вас выглядеть вот так: как создать сайт на wordpress

15) Создание сайта на вордпресс набирает обороты, если вы закрыли файл "sidebar.php", то его нужно открыть заново, будем править его. Сейчас я покажу вам как создать сайт на wordpress с блоком новости в сайдбаре. Будем делать дополнительный цикл WP.

15.1) После этого тега "<div id="left">" вам нужно вставить выборку из категории Новости. Выглядит она вот так:

<?php
        global $post;
        $tmp_post=$post;
        global $more;
        $tmp_more = $more;
        $tpost=get_posts("cat=1&posts_per_page=3");
        if($tpost){
        foreach( $tpost as $post ){setup_postdata($post);
    ?>

Далее, возможно нам придется заменить cat=1 на другое число, если Новости будут иметь другой ИД. К этому вопросу мы еще вернемся при настройке ВП.

Если решим что 3 новости для нас много или мало, нужно менять вот этот параметр posts_per_page=3.

Подробно о функции get_posts и query_posts (откроется в новой вкладке) описано по ссылке.

15.2) Находим "</div><!--left-->" и перед ним закрываем цикл, который был открыт в п. 15.1 вот таким кодом:

<?php
        }
        }
        $post=$tmp_post;
        $more=$tmp_more;
    ?>

15.3) Теперь, довольно сложная задача для понимания. Смотрите, у нас в коде есть 3 блока, которые начинаются на "<div class="post">" и заканчиваются "</div><!--post-->". Нужно сделать так, что бы у нас остался такой только один блок, остальные просто удалить, как на скине: instr-8

15.4) Вместо <a href="#" class="postTit">Новость 1</a> нам нужно вставить функцию для генерации ссылки на новость the_permalink(), а также известную из п. 14.4 функцию the_title() - для получения названия новости.

<a href="<?php the_permalink(); ?>" class="postTit"><?php the_title();?></a>

15.5) Если вы внимательно читали пост, то уже догадались, что нам нужно вставить краткий вывод контента новостей, до тега more (читать далее). Для этого нужно вставить вместо "<p>Текст для нашей первой новости. Краткий текст текст текст текст текст. Рыба рыба.</p>" вот такое:

<?php $more=0; the_content(''); ?>

Вот этим кодом $more=0 мы говорим, что нам нужно получить текст только до тега далее, остальное нам не интересно.

15.6) Если у нас есть новости, значит нам нужно выводить дату, когда эта новость была актуальной. Найдите "<div class="postDD">12.12.2015</div>" и вставьте туда the_time(), вот так получится:

<div class="postDD"><?php the_time("d.m.Y");?></div>

15.7) На этом правка файла "sidebar.php" закончена, можете сверить с моим скином ваш результат, сохранить его и временно зарыть, чтобы не мешал. создание сайта на wordpress

16) Аналогично п. 7, вам нужно создать еще один файл с именем "footer.php" в папке "shabtestsite".

17) Из файла "index.html" мы должны выделить и скопировать весь код, что начинается с "<div id="footObm"></div>" до самого конца страницы instr-10Вставляем этот код в файл "footer.php".

18) Находим "</body>" и перед ним вставляем вот такой код:

<?php wp_reset_query();?>
<?php wp_footer();?>

Этот код нужен для правильной работы шаблона вордпресс.

19) Пожалуй самая быстрая правка файла. Сверяем с тем что у меня на скине, сохраняем файл и можем его закрывать. instr-1120) На этом, создание сайта на wordpress еще не законченно. Давайте аналогично п.7 создадим еще несколько файлов в папке "shabtestsite". Создаем и оставляем их пустыми. Имена файлов:

  1. functions.php
  2. index.php

Далее я расскажу вам что с этими файлами нужно делать.

21) В файл "functions.php" нам нужно закинуть вот такой код целиком:

<?php
 add_theme_support('nav_menus');
 register_nav_menus( array(
 'menu1' => 'Меню верх'
 ) );
 add_theme_support('post-thumbnails');
 set_post_thumbnail_size(150,150,TRUE);
 remove_action( 'wp_head', 'feed_links_extra', 3 );
 remove_action( 'wp_head', 'feed_links', 2 );
 remove_action( 'wp_head', 'rsd_link' );
 remove_action( 'wp_head', 'wlwmanifest_link' );
 remove_action( 'wp_head', 'index_rel_link' );
 remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
 remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
 remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 );
 remove_action( 'wp_head', 'wp_generator' );
 remove_action( 'wp_head', 'nextgen-gallery' );
 remove_action('wp_head', 'rel_canonical');
 remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0 );
 add_filter( 'previous_post_rel_link', 'disable_stuff' );
 add_filter( 'next_post_rel_link', 'disable_stuff' );
 function disable_stuff( $data ) {
 return false;
 }
 ?>

Этим кодом мы:

  1. Подключаем меню, которое выводим в шапке.
  2. Добавляем поддержку миниатюр и задаем им дефолтовые значения (на всякий случай, в этом шаблоне миниатюры не используются).
  3. Удаляем мусор из шаблона wordpress, который туда попадет из самой CMS.

22) Сохраняем и закрываем "functions.php" .

23) Открываем для правок файл "index.php", который мы сделали в каталоге "shabtestsite".

23.1) Также, открываем файл "page.php", который мы уже правили. В этом файле нам нужно выделить абсолютно все и скопировать. Вставить скопированный код нужно в файл "index.php".

23.2) Закрываем "page.php".

23.3) Теперь будьте внимательны, файл index.php нам нужно немножко поправить для правильного вывода новостей. Находим код "<?php if (have_posts()) : while (have_posts()) : the_post(); ?>" и после него удаляем весь текст с кодом аж до этого кода "<?php endwhile; endif; ?>".

23.4) На удаленной место, мы должны вставить код вывода новостей из сайдбара (sidebar.php), вот такой код:

<div class="post">
 <a href="<?php the_permalink(); ?>" class="postTit"><?php the_title();?></a>
 <div class="postTxt">
 <div class="postDD"><?php the_time("d.m.Y");?></div>
 <?php $more=0; the_content(''); ?>
 </div><!--postTxt-->
 </div><!--post-->

$more=0; - можно удалить, так как вордпресс всегда для рубрик обрезает текст до тега "далее". А можно й оставить он не должен мешать. У себя в примере я удалил.

23.5) Так как новостей у нас на сайте может быть много, мы должны предусмотреть пагинацию страниц. Для этого после "<?php endwhile; endif; ?>" нам нужно добавить код вызова плагина пагинации wp-pagenavi:

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

23.6) Проверяем этот файл с тем что получилось у меня:

создание сайта на wordpress с нуля
и сохраняем его.

24) Теоретически, на этом создание сайта на wordpress закончено, точнее создание шаблона, так как сайт нужно еще настроить и установить наш новый шаблон. Далее я все подробно опишу, наберитесь терпения 🙂 . Предлагаю сверить файлы, которые находятся в нашем шаблоне. Вот мой скин директории: как создать сайт на wordpress

 

Скачать готовый шаблон сайта на wordpress

к менюДля тех, кому не сильно интересно переносить и сверять шаблон пошагово, я хочу загрузить zip архив с готовым шаблоном для wordpress. Его достаточно активировать и настроить чтобы он начал работать.

Скачать шаблон можно по этой ссылке: http://help-wp.ru/wp-content/uploads/2019/12/shabtestsite.zip

 

Продолжение: wordpress создание сайта бесплатно

к менюКак я писал выше, создание сайта на wordpress не заканчивается созданием шаблона. Нам еще нужно забросить тему на хостинг и активировать ее для сайта. Также, нужно настроить сам вордпресс под наш сайт, наполнить его, подправить код шаблона для правильной работы, установить плагины. О этом всем я расскажу вам в следующей статье, под названием как сделать сайт на wordpress часть 2. Обязательно посетите эту страницу.

Комментарии к записи «Создание сайта на wordpress с нуля для начинающих»:
  1. Тоха:

    Создание сайта на wordpress под заказ по низким ценам (-url-)
    Сделаем сайт быстро и профессионально.

  2. Виталий:

    hi, мне нужен сайт визитка на wordpress. Если понравится ваша работа возможно длительное сотрудничество. Могу обеспечить некую стабильность в заказах. Свою почту оставляю в соответствующем поле.

  3. Сайт на wordpress:

    Создание сайта на wordpress по низким ценам: (-spam-url-)
    Готовы к сотрудничеству с большими компаниями и частными лицами.

  4. marinich.sveta:

    Привет.
    Так понимаю ваша специализация создание сайта на wordpress?
    Предлагаю вам сотрудничество по созданию сайтов на вордпрес.
    Я занимаюсь веб дизайном, периодически спрашивают знакомого программиста, могу советовать вас, а вы, в свою очередь, будете у меня заказывать макеты.
    Моя страница на веблансере (-url-).

Сделать заказ
Онлайн помощь по WordPress