Портирование HTML шаблона в Woedpressю Часть вторая

wordpress cms темы wordpress cms Портирование HTML шаблона

Автор: Вдадимир Подводный

Итак, в первом уроке мы перенесли код из шаблона Carousel Template Bootstrap в файл Главной страницы нашего сайта front-page.php и всё у нас прекрасно отображается, но это статическая информация. Настало время понемногу заменять статический код динамическим, для этого используем, в первую очередь, файл hunction.php. Задачи, которые выполняет этот файл несколько, это устанавливаются некоторые параметры ядра WordPress, например, это размер миниатюр, прописывается путь к файлам для локализации темы, определяются области выведения меню, создаются места размещения (разделы) для виджетов и другое. Но для нас также важно предоставить необходимые функции для реализации динамической работы темы.

В этом смысле важным является понимание того, что файл functions.php загружается в процессе перехода на любую страницу в WordPress, включая адми-панель, а также при выполнении AJAX запросов. Это позволяет нам изменять любые аспекты разрабатываемых проектов на WordPress, а не только то, что связано с внешним видом.

Как уже упоминалось, файл functions.php предназначен для создания функционала, связанного непосредственно с темой, т.е. с оформлением сайта. Для напоминания представим список задач, которые должен выполнять файл functions.php:

  • Установить ширину содержания в WordPress
  • Объявить доступные разделы для виджетов
  • Установить пути к файлам локализации темы
  • Объявить поддержку миниатюр и установить их размеры
  • Объявить поддержку навигационного меню
  • Подключить необходимые скриптов и дополнительные стили
  • Подключить стили темы для визуального редактора
  • Создать раздел с настройками темы
  • Создать дополнительные элементы управления в конфигураторе темы
  • Объявить дополнительные функции, которые должны быть использованы в шаблонах темы

Для подключения стилей или скриптов мы можем применить приём, который называется хук. Хук — это крючок, на который мы можем повесить свой код, не затрагивая при этом файлы ядра WordPress или файлы плагинов. Таким образом, хук события (action) add_action() позволяет нам выполнять любой код в том месте по условию, где висит «крючок», другими словами, хук (фильтра или события) прикрепляет PHP функцию и затем эта функция сработает, в момент срабатывания хука, таким образом обеспечивается модульность.

Выглядит это следующим образом. Когда в вордпресс генерируется шапка сайта, т.к. мы вставили функцию wp_head() - переменную шаблона перед тэгом </head>, в файле темы header.php, то запускается событие, к которому мы привязываем необходимую функцию.

В следующей строке можно видеть, что мы привязываем функцию к хуку для чего используем метод add_action(). На первом месте находится стандартное действие, которое привязано к зарезервированному в вордпресс событию wp_head() илиwp_footer(). При всём этом функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук wp_enqueue_scripts(), который регистрирует все стили и скрипты в теме. Вторым параметром следует наша функция myfirst_media(), где myfirst означает имя темы, и внутри которой мы регистрируем экшен wp_enqueue_scripts(), а media — означает нашу функцию (название произвольное):

add_action('wp_enqueue_scripts', 'myfirst_media');

Затем мы в рамках этого подхода регистрируем стили и скрипты. В итоге мы получаем следующее:

add_action('wp_enqueue_scripts', 'myfirst_media');
  function myfirst_media() { 
         wp_enqueue_style('myfirst-main-bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css');
         wp_enqueue_style('myfirst-main-carousel', get_template_directory_uri() . '/assets/css/carousel.css');
         wp_enqueue_style('myfirst-main', get_stylesheet_uri());         
         wp_enqueue_script('myfirst-main-script-bootsrap', get_template_directory_uri() . '/assets/js/bootsrap.min.js', [], null, true);
         wp_enqueue_script('myfirst-main-script-docs', get_template_directory_uri() . '/assets/js/docs.js', [], null, true);
         wp_enqueue_script('myfirst-main-script-jquery', get_template_directory_uri() . '/assets/js/jquery.js', [], null, true); 
}

Функция wp_enqueue_style('id', 'path') присваивает уникальный идентификатор ссылке и указывает полный путь до файлов стилей и скриптов приведённых в качестве второго параметра, где get_template_directory_uri() - получает URL текущей темы, учитывается SSL. Это удобно, поскольку изменение домена не повлияет на рзультат.

Чтобы происходили события при генерации подвала, мы должны вставить перед закрывающим тэгом </body> переменную wp_footer(). Теперь мы можем убрать абсолютные ссылки на файлы стилей, а также на скрипты в файле head.php и убедиться, что всё работает нормально и скрипты выводятся в нижнем колонтитуле.

Замена статического кода переменными шаблона

Продолжим замену статического кода шаблона Carousel Template Bootstrap. Чтобы указать браузеру язык, на котором написан текст внутри страницы в тэге используется атрибут lang="en". Поскольку администартор может менять язык сайта, то необходимо заменить строку:

<html class="front-page" lang="en">

на

<html class="front-page"> <?php language_attributes(); ?>

гдеlanguage_attributes() выводит атрибуты для HTML тега <html> со значениями текущего языка: lang="ru-RU".

Заменяем также метатэг <meta charset="utf-8"> на <meta charset="<?php bloginfo( 'charset' ); ?>">, где bloginfo( 'charset' ) выводит различную информацию о сайте, которая, в большей части, указана в настройках сайта. В итоге код файла head.php выглядит следующим образом:

<!DOCTYPE html>
<html  class="front-page" <?php language_attributes(); ?>> 
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" name="">
    <meta name="keywords" name="">
    <meta name="author" content="Иван Сидоров">
   <title><?php wp_get_document_title() ?></title>
    <link rel="shortcut icon" href="http://bootstrap-3.ru/assets/ico/favicon.ico">
<!----------------->
    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Custom styles for this template -->
    <?php wp_head() ?>
  <style id="holderjs-style" type="text/css"></style>
</head>

Для улучшения SEO нам также желательно добавить микроразметку на наш сайт и мы сделаем это в файле functions.php:

//Добавляем информацию о тэгах Open Graph после тега `<head>`       
add_action('wp_head', 'facebook_open_graph');
function add_opengraph_doctype($output) {
    return $output . '
    xmlns="https://www.w3.org/1999/xhtml"
    xmlns:og="https://ogp.me/ns#" 
    xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Добавляет метаинформацию Open Graph из фактических данных статьи или настройте ее по мере необходимости
    function facebook_open_graph() {
        global $post;
        if ( !is_singular()) //если это не пост или страницу, то выход
            //return;
        // если пост, то
        if($excerpt = $post->post_excerpt) 
            {
            $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace("", "'", $excerpt);
            } 
            else 
            {
                    $excerpt = get_bloginfo('description');
        }
             echo '' ."\n";
            //Вам нужно будет найти свой идентификатор профиля Facebook и добавить его в качестве администратора
            echo '<meta property="fb:admins" content="100004650211774"/>' ."\n";
            echo '<meta property="og:title" content="' . get_the_title() . '"/>' ."\n";
            echo '<meta property="og:description" content="' . $excerpt . '"/>' ."\n";
            echo '<meta property="og:type" content="article"/>' ."\n";
            echo '<meta property="og:url" content="' . get_permalink() . '"/>';
            // Настройки ниже с именем вашего сайта
            echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>' ."\n";
            if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
            //Создайте изображение по умолчанию на сервере или изображение в медиатеке и вставьте его URL-адрес здесь
            $default_image="http://example.com/image.jpg"; 
            echo '<meta property="og:image" content="' . $default_image . '"/>' ."\n";
            echo '' ."\n";
        //Давайте также добавим некоторые метаданные, связанные с Twitter
            echo '<meta name="twitter:card" content="summary" />' ."\n";
            //Это сайт имя пользователя Twitter @использоваться в футере карта
            echo '<meta name="twitter:site" content="@site_user_name" />' ."\n";
        //Это Twitter @username, который является создателем / автором статьи
            echo '<meta name="twitter:creator" content="@username_author" />' ."\n";
            echo '' ."\n";
    }
        else{
            $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
            echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>' ."\n";
        }
    }

Комментарии

Blog Comments powered by Disqus.

Предыдущая запись