[Инфо] Как натянуть html шаблон на Wordpress

Тема в разделе "Wordpress", создана пользователем ponoroshca, 6 июн 2018.

Информация :
Все пользователи Nulled-а обязаны ознакомиться с основными правилами форума!
Правила: Правила форума
Правила раздела: ОБЩИЕ СВЕДЕНИЯ | Правила раздела | Правила оформления [​IMG]
Полезное: Раскодирование шаблонов | Шорткоды | Поиск плагинов | [​IMG] Складчины
Плюшки: functions.PHP - часть 1 | часть 2
Разделы WP: Шаблоны | CodeCanyon
Модераторы: ponoroshca
  1. ponoroshca

    ponoroshca Копии любых сайтов

    Moderator
    Регистр.:
    9 дек 2012
    Сообщения:
    165
    Симпатии:
    211
    Шаблон HTML после быстрого поиска я выбрал вот этот — Simple Factorial. Дизайн конечно простоват, но в целях эксперимента подойдет. Есть заголовок, меню, футер, сайдбар.

    [​IMG]


    ПОДГОТАВЛИВАЕМ ФАЙЛЫ ИСХОДНОГО ШАБЛОНА ДЛЯ ПЕРЕНОСА НА WORDPRESS
    Создаем новую папку в каталоге с темами WordPress. Распаковываем и копируем туда шаблон Simple Factorial.

    Первое, что я сразу сделал, перенес изображения, вызываемые из файла стилей в отдельный каталог img/, чтобы они не мешались в корневой папке. И отредактировал style.css соответствующим образом.

    [​IMG]


    ПОДКЛЮЧАЕМ ТЕМУ В АДМИНКУ
    Чтобы тема заработала и появилась в админке WordPress, надо в самом верху файла Style.css записать следующие строки:

    Код:
    /*
    Theme Name: Simple Factorial
    Theme URI: //www.quackit.com/html/templates/download/bryantsmith/SimpleFactorial/
    Author: Bryant Smith
    Author URI: //www.quackit.com/
    Description: Simple Factorial is the same as Simple * Simple-1 * Simple-2 * Simple-3 ; or in other words, a whole lot of simple. This template is meant to be really simple to use, and really simple to naviagate. It should also do well with search engines for that reason.
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: //www.gnu.org/licenses/gpl-2.0.html
    */

    СОЗДАЕМ ФАЙЛ HEADER.PHP
    Копируем в него из index.html следующий код:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="//www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Simple Factorial by Bryant Smith</title>
    </head>
    Обратите внимание, я не скопировал меню, идущее за тегом head, хотя оно будет также находиться в заголовке, и мы туда добавим полноценное динамическое меню WordPress.

    [​IMG]

    Теперь будем адаптировать файл header.php. Вот готовый код, и я объясню как он работает.


    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="//www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
    <title><?php bloginfo('name'); ?></title>
    <link rel="pingback" href="<?php bloginfo'pingback_url' ); ?>">
    <?php wp_head(); ?>
    </head>
    В нем я вывел динамически тег title, и ссылку на файл стилей.


    <?php bloginfo('stylesheet_url'); ?>
    • выводит ссылку файла стилей

    <title><?php bloginfo('name'); ?></title>
    • динамически формирует title из названия сайта

    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    • возвращает URL файла xmlrpc.php

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

    СОЗДАЕМ ФАЙЛ FOOTER.PHP
    Копируем в него следующий участок кода:

    PHP:
    <div id="footer"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> by <a href="#">My Site</a>
    </div>


    <?php wp_footer(); ?>
    </body>
    </html>

    <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>
    • вывожу название сайта с ссылкой на него

    <?php wp_footer(); ?>
    • хук wordpess, аналогичный wp_head(), только для подвала.


    СОЗДАЕМ ФАЙЛ INDEX.PHP, ОСНОВНОЙ ШАБЛОН ДЛЯ СТРАНИЦ САЙТА
    Подключаем в него заголовок и подвал

    1
    <?php get_header(); ?> <?php get_footer(); ?>
    Копируем оставшееся содержание из файла index.html и вставляем в index.php между хэдером и футером.

    [​IMG]

    Теперь сделаем еще один шаг, перенесем код меню в header.php. Файл с изменениями выглядит вот так.

    [​IMG]

    В принципе, можно активировать тему, и смотреть что получилось.

    [​IMG]

    Вывелся наш шаблончик. Правда со статическим содержанием и сайдбаром. Теперь нужно сделать их динамическими.


    ВЫВОДИМ ЗАПИСИ В СОДЕРЖАНИИ ДИНАМИЧЕСКИ
    Вот код динамического вывода записей в основном содержании, ниже будут пояснения.


    PHP:
    <div id="contentColumn">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

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




    <div class="divider"></div>


    <?php the_content(); ?>
    <?php 
    endwhile; else : ?>

    <?php _e'Sorry, no posts were found.' ); ?>

    <?php endif; ?>
    </div>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>;
    • если записи найдены, и пока они есть, извлечь их из базы данных

    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    • Вывести название записи с ссылкой ЧПУ в теге h2

    <?php the_content(); ?>
    • вывести саму запись

    <?php endwhile; else : ?>
    • завершение цикла, иначе

    <?php _e( 'Sorry, no posts were found.' ); ?>
    • если записи не найдены, вывести информативное сообщение
    Обратите внимание, я сохраняю начальную разметку и классы шаблона, чтобы стили правильно подключились.
    Для проверки, я создаю несколько записей в админке WordPress, и убеждаюсь, что тема правильно работает.


    ДОБАВИМ SIDEBAR/БОКОВУЮ КОЛОНКУ С ВИДЖЕТАМИ
    Создаем файл sidebar.php, переносим в него весь участок кода, выводящий боковую колонку в шаблоне.

    Вместо него вставляем php функцию:


    <?php get_sidebar(); ?>
    [​IMG]

    Сохраняем файл, проверяем работу. Sidebar всё еще статический, просто он выводится из шаблона.

    ЗАРЕГИСТРИРУЕМ SIDEBAR В FUNCTIONS.PHP
    Файл functions.php позволяет дополнять WordPress новой функциональностью и возможностями, так же как и плагины. Он лежит в корне темы.

    Создаем functions.php, и вписываем в него следующий код.


    PHP:
    if ( function_exists'register_sidebar' ) ) {
    register_sidebar( array (
    'name' => __'Primary Sidebar''primary-sidebar' ),
    'id' => 'primary-widget-area',
    'description' => __'The primary widget area''dir' ),
    'before_widget' => '
    <div class="subHeader">'
    ,
    'after_widget' => '</div>

    '
    ,
    'before_title' => '
    <h3>'
    ,
    'after_title' => '</h3>

    '
    , )
    );
    }
    Если функция существует, зарегистрировать sidebar, мы передаем ей название сайдбара, его ID, описание, html теги, которыми окружены его элементы. Обратите внимание на класс оборачивающего блока subHeader, он взят из шаблона Simple Factorial, чтобы стили наложились правильно.

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

    [​IMG]

    Отлично. Теперь давайте разберемся с меню.


    РЕГИСТРИРУЕМ ДИНАМИЧЕСКОЕ МЕНЮ В FUNCTIONS.PHP
    В файл functions.php добавляем поддержку меню с помощью стандартных функций WordPress:


    add_theme_support('nav-menus'); if ( function_exists('register_nav_menus')) { register_nav_menus( array( 'main' => 'Main Nav' ) ); }
    Открываем файл header.php, заменяем блок статического меню строкой:


    <?php wp_nav_menu( array('menu' => 'Main', 'container' => 'nav' )); ?>
    В итоге должно получиться вот так:

    [​IMG]

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

    На этом шаге мы привели полностью вид главной страницы к шаблону. Мы добавили динамический сайдбар и меню. Но на этом наша тема еще не готова. Мы создадим и настроим также следующие шаблоны.

    • single.php — шаблон для вывода записи
    • page.php — шаблон для обычной страницы
    • 404.php — шаблон для страницы 404
    • searchform.php — шаблон для формы поиска
    Создавать их уже будет проще, имея главную страницу. Но есть некоторые детали, на которые следует обратить внимание.

    СДЕЛАЕМ ШАБЛОН ДЛЯ ВЫВОДА СТРАНИЦЫ ЗАПИСИ SINGLE.PHP

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


    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    Станет


    <h2><?php the_title(); ?></h2>
    Теперь, чтобы немного изменить вид шаблона single.php, давайте добавим под заголовком автора и дату публикации.

    Нужно вставить следующий небольшой код.

    <div class="postedby"> Posted by <?php the_author_posts_link(); ?> on <?php the_time(); ?></div>
    <?php the_author_posts_link(); ?> — выводит имя автора с ссылкой на все его публикации

    <?php the_time(); ?> — выводит дату, можно задавать формат, по умолчанию берет его из настроек

    Вот как вывелась наша запись

    [​IMG]

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


    .postedby {padding-left: 15px;}


    Не хватает на этой странице навигации на предыдущую и следующую записи. Нужно это также сделать и для главной.

    Постраничная навигация для шаблона single.php


    <div class="pagenavi"><?php previous_post_link(); ?> | <?php next_post_link(); ?></div>
    Функции


    <?php previous_post_link(); ?>
    и


    <?php next_post_link(); ?>
    по умолчанию без задаваемых аргументов возвращают название (title) для предыдущей и следующей записи.

    Постраничная навигация для главной страницы. Вставьте в index.php


    <div class="pagenavi"><p><?php posts_nav_link(); ?></p></div>
    Вот как выглядит результат. Я специально добавил еще записи через админку, чтобы образовались несколько страниц.


    [​IMG]

    Как финальный шаг, я бы выровнял эти ссылки по правому краю, с небольшим отступом:


    .pagenavi {float: right; padding-right: 15px;}


    СДЕЛАЕМ ШАБЛОН ДЛЯ СТРАНИЦ — PAGE.PHP
    Во многом он будет совпадать с выводом записи, поэтому просто копируем single.php.

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

    Думаю, вы знаете как это сделать. Если сомневаетесь, прочтите предыдущие абзацы, и/или посмотрите на скриншоте как выглядит готовый файл page.php.

    [​IMG]



    СДЕЛАЕМ ШАБЛОН ДЛЯ СТРАНИЦЫ ОШИБКИ 404
    Снова копируем наш index.php и называем файл 404.php. Убираем код основного содержания, оставляем только хэдер, футер и сайдбар.

    Вместо динамического вывода записи, выводим сообщение об ошибке, что запрашиваемая страница не найдена.

    <h3>Ошибка 404!</h3> <p>Нет такой страницы, уважаемый. Вернитесь на <a href="<?php bloginfo('home'); ?>">Главную</a>.</p>
    Можно задать отдельный класс (page404) в основной блок, чтобы выровнять сообщение по центру.


    ТЕПЕРЬ ДАВАЙТЕ НАСТРОИМ РАБОТУ ФОРМЫ ПОИСКА
    Добавим форму поиска через встроенный в WordPress виджет. Если есть файл searchform.php, виджет использует форму из него.

    Создадим данный файл, и внесем в него код.


    <div class="searchbar"> <form name="search" method="get" action="<?php bloginfo('url'); ?>"> <input type="text" name="s" value="Search&#x2026;" /> <input type="submit" name="submit" value="Search!" /> </form> </div>
    Обратите внимание на функцию


    <?php bloginfo('url'); ?>
    , — иначе поиск может не сработать.


    ПОДВЕДЕНИЕ ИТОГОВ
    Итак, у нас есть вот такой шаблончик, который мы конвертировали в рабочую тему WordPress.


    [​IMG]

    Мы видим, что виджет поиска нуждается в доработке стилей. Но сейчас мы этого не будем делать. На самом деле, я рекомендую подключить другой поиск, от Яндекс или Google, для которых есть подробные руководства.
     
    ultraz, AkkAdemik, dsd и 10 другим нравится это.
  2. jebir

    jebir Писатель

    Регистр.:
    9 фев 2016
    Сообщения:
    3
    Симпатии:
    5
    Все привет!

    "Курс «Темизация WordPress. Cоздание и установка уникальной темы» — это уникальный для Рунета курс. Уникальный по нескольким причинам: это был первый видеокурс в Рунете по созданию тем для WordPress, аналогов курса по комплексности подхода и качеству материала в Рунете просто нет.

    В курсе «Темизация WordPress. Cоздание и установка уникальной темы» показано создание темы для WordPress с нуля.

    По многочисленным просьбам в комментариях, создадим, используя шаблон из второй части, готовую тему для WordPress (WP)."


    Вот делюсь с Вами видео урок по переносу html на wordpress ссылка на mega.nz
     
    AkkAdemik, kekc.lt, yavasilek и ещё 1-му нравится это.
  3. rotorda

    rotorda Писатель

    Регистр.:
    6 май 2014
    Сообщения:
    3
    Симпатии:
    0
    Есть ли еще курсы на эту тему?
     
  4. ponoroshca

    ponoroshca Копии любых сайтов

    Moderator
    Регистр.:
    9 дек 2012
    Сообщения:
    165
    Симпатии:
    211
    Куча в интернете курсов google в помощь!