Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

HTML5 надає відмінний набір нових можливостей та простих рішень. Незабаром він повністю підтримуватиметься більшістю браузерів, які сьогодні використовуються. Зрештою всім доведеться конвертувати теми WordPress з XHTML в HTML5. Після оновлення Google PandaДля кращого ранжування в Google вашим сайтам потрібен більш читальний код. Я навчу вас конвертувати вашу тему з XHTML в HTML5. Ми також подбаємо про 2% інтернет-користувачів з вимкненим JavaScript (Для зворотної сумісності).

Наші цілі

У цьому посібнику ми сконцентруємося на конвертуванні нашої WordPress теми з XHTML в HTML5. Ми будемо просуватися крок за кроком, вивчаючи зміни в наведених нижче файлах (ці файли знаходяться в папці вашої теми, тобто wp-content/themes/ваша-тема/ )

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
  • header.php
  • index.php
  • sidebar.php
  • footer.php
  • single.php (не обов'язково)

Базова розмітка HTML5

Розгляньмо базову розмітку HTML5, яку ми збираємося зробити. HTML5 - це набагато більше, ніж значення "тип доктНа самому початку вашого коду. Кілька нових елементів допоможуть нам програмувати і описувати стиль набагато більш ефективним способом і з меншою кількістю розмітки (це одна з причин, з якої HTML5 краще).

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TITLE | Slogan!</title>
</head>
<body>
    <nav role="navigation"></nav>
<!--Ending header.php-->
<!--Begin  index.php-->
    <section id="content">
        <article role="main">
            <h1>Title of the Article</h1>
            <time datetime="YYYY-MM-DD"></time>
            <p>Some lorem ispum text of your post goes here.</p>
            <p>The article's text ends.</p>
        </article>
         
        <aside role="sidebar">
            <h2>Some Widget in The Sidebar</h2>
        </aside>
    </section>
<!--Ending index.php-->
<!--begin  footer.php-->
    <footer role="foottext">
        <small>Some Copyright info</small>
    </footer>
</body>
</html>

Тепер нам потрібно дізнатися, куди вставити нові теги HTML5 заголовок, нижній колонтитул, nav, розділ и стаття. Назви нових тегів говорять самі за себе про функції, на відміну від XHTMLструктурованого за допомогою DIV.

Крок 1. Конвертування header.php в HTML5

header.php на XHTML

Тепер я покажу вам код, який зазвичай використовується в header.php у темах WordPress на XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My  Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header  -->
<div class="header">
    <div class="container">
        <h1><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
    </div><!-- End  Container -->
</div><!-- End  Header -->
 
 
<!-- Navigation Bar Starts -->
<div class="navbar">
    <div class="container">
        <ul class="grid nav_bar">
            <?php wp_list_categories('navs_li='); ?>
         </ul>
    </div>
</div>
<!-- Navigation Bar Ends -->
<div class="container">

Хтось спитає: навіщо ми все це робимо? Відповідь проста: для семантичної розмітки HTML5. Це зменшує кількість розмітки, роблячи розуміння та керування набагато простішим.

header.php на HTML5 (перетворений)

Перегляньте код і потім дотримуйтесь наведених нижче інструкцій, щоб конвертувати header.php вашої теми в HTML5.

<!doctype html>
<html>
<head>
<title>My Blog</title>
<?php wp_head(); ?>
</head>
<body>
<!-- Header -->
<header>
    <div class="container">
        <h1 class="grid"><a href="<?php bloginfo('url');?>">My Blog is Working Great.</a></h1>
    </div>
</header>
<!-- End Header  -->
  
<!-- Navigation Bar Starts-->
<nav>
    <div class="navbar">
        <ul class="grid nav_bar">
            <?php wp_list_categories('title_li='); ?>
         </ul>
    </div>
</nav>
<!-- Navigation Bar Ends -->
<section class="container">

Як ви бачите, перетворений код дуже схожий на код XHTML. Давайте обговоримо зміни.

  • <!doctype html> - HTML5 дійсно простий doctype, але він включає багато нових семантичних тегів.
  • <header> - Семантичний тег для блоку шапки.
  • <nav> – Ми замінили DIV блок навігації новим семантичним тегом HTML5 для керування блоками навігації.

Зверніть увагу: деякі включають тег розділ у шапку. З цього приводу ведеться багато суперечок. Особисто я проти включення тега розділ у шапку, оскільки він знищить красу HTML5. Звичайно, ви можете використовувати старий DIV тут.

Що зі скриптами та таблицями стилів?

Увімкнення скриптів і таблиць стилів у заголовку при конвертуванні WordPress теми в HTML5 дійсно дуже просте. У HTML5 ми просто використовуємо теги <script> и <link>. Так що видаліть type="text/javascript" – усі браузери розпізнають тег <script> як JavaScriptякщо ви не напишете явно його тип. Також видаліть type="text/css" з вашого <link> тег для таблиць стилів.

Враховуємо старі браузери

HTML shiv вмикається для підтримки старими браузерами. Це простий JavaScript файл. Деякі приклади такого shiv - HTML5 скрипт Ремі Шарпа або скрипт Modernizr. Давайте використовуємо Modernizr. Нам потрібно викликати скприт із нашого файлу functions.php, ось так:

function html5_scripts()
{
	// Register the Modernizr script
	wp_register_script( 'modernizr', get_template_directory_uri() . '/js/Modernizr-1.6.min.js' );

	// Enqueue Modernizr
	wp_enqueue_script( 'modernizr' );
}
add_action( 'wp_enqueue_scripts', 'html5_scripts', 1 );

Підказка: помістіть теги, які з'являються послідовно, всередину

Зверніть увагу: цей скрипт потрібно розміщувати в самому верху всередині тега тому ми привласнили add_action пріоритет рівний 1.

Як конвертувати WordPress тему в HTML5

Крок 2. Конвертування index.php в HTML5

Стандартний index.php на XHTML складається з наступних тегів. Я конвертую кожен із них, пояснюючи весь процес після перетворення.

Зверніть увагу: я не пишу тут весь код, оскільки він зробить піст довшим без вагомої на те причини

index.php на XHTML

<div id="container">
<div id="content">
<div id="entries">
<div id="post">...</div>
 
</div><!--Ending Entries-->
<?php get_sidebar(); ?>
</div><!--Ending content-->
</div><!--Ending container-->
<?php get_footer(); ?>

Як конвертувати WordPress тему в HTML5

index.php на HTML5 (перетворений)

<div id="container">
    <div id="content">
        <section id="entries">
            <article id="post">...</article>
        </section><!--end entries-->
        <?php get_sidebar(); ?>
    </div><!--end content-->
</div><!--end wrap-->
<?php get_footer(); ?>

Перед тим, як розглянути зроблені нами зміни, ми повинні знати, що HTML5 надає нам 3 основні теги розмітки: розділ, стаття и aside. розділ замінить DIV публікацій, стаття замінить DIV посту, а aside буде використовуватися для нашого сайдбару трохи згодом.

  • <section> — HTML5 має тег розмітки, який відокремлює блок для коду, який знаходиться всередині нього.
  • <article> - Семантичний тег для частини посту, за типом розділ.
  • <aside> - Семантичний тег для розміщення зображень посту збоку та для сайдбарів.

Хлібні крихти і навігація по сторінках — якщо наша тема має хлібні крихти, то вони будуть використовуватися в шарі типу <div>...</div>, а для навігації ми будемо використовувати <nav id="pgnav">...</nav>

Як конвертувати WordPress тему в HTML5

Повний index.php в HTML5

<section class="entries">
  <?php if (have_posts()) : while (have_posts()) : the_post();
   
<article class="post" id="post-<?php the_ID(); ?>">
    <aside class="post_image">
        <?php
        if ( has_post_thumbnail() ) { 
            the_post_thumbnail();
        } else { ?>
            <a href="<?php the_permalink() ?>"><img src="<?php bloginfo('template_directory');?>/images/noImage.gif" title="<?php the_title(); ?>" /></a>
        <?php }?>
    </aside>
    <section class="post_content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <p><?php echo get_the_excerpt(); ?></p>
        <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="read_more ">Read More</a>
    </section>
    <section class="meta">
  
    <p> <?php the_category(',') ?></p>
  
    <p><?php the_tags(""); ?></p>
  
    </section>
</article>
  <?php endwhile; else: ?>
  <p>
    <?php _e('Sorry, no posts matched your criteria.'); ?>
  </p>
  <?php endif; ?>
  
  <?php posts_nav_link(' ⏼ ', __('« Newer Posts'), __('Older Posts »')); ?>
</section>

Крок 3. Працюємо з sidebar.php

Ми будемо використовувати у нашому сайдбарі <aside> замість div, Наприклад:

sidebar.php на XHTML

<div id="sidebar">...</div>

- після використання <aside> виглядатиме саме так.

sidebar.php на HTML5

<aside id="sidebar">...</aside>

Це було просто!

Як конвертувати WordPress тему в HTML5

Крок 4. Зміни footer.php

Ми будемо використовувати семантичний тег <footer> замість звичайного div в нашому footer.php, Наприклад:

footer.php на XHTML

<div id="footer">
<div id="foot_widgets">...</div>
<div id="copyright">...</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

Як конвертувати WordPress тему в HTML5

footer.php на HTML5

<footer id="footer">
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<section id="foot_widgets">...</section>
<div id="copyright">...</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Крок 5. Працюємо з single.php

В single.php немає ніяких особливих змін, тому я просто вставлю сюди змінений код, він може допомогти новачками. Я використав тут теги section и article. Ви також можете використовувати тег <time>, якщо хочете.

single.php на XHTML

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
<div class="container">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <div class="content">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
  
        <div id="entry-content-single">
          <?php the_content('<p >Read More</p>'); ?>
        </div>
        <div class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 
  
          <p><?php the_tags(""); ?></p>
        </div>
        <div class="clearfix"></div>
    </div>
  
  <!-- End of post -->
</div></div>
  
 
<?php get_footer(); ?>

Як конвертувати WordPress тему в HTML5

single.php на HTML5

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
<section class="content">
<div class="breadcrumbs"><?php the_breadcrumb(''); ?></div>
    <article class="box">
        <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
  
        <section id="entry-content-single">
          <?php the_content('<p>Read More</p>'); ?>
        </section>
        <section class="meta"> Posted by:
          <?php the_author() ?>
          <?php edit_post_link(__('Edit This')); ?> 
  
          <p><?php the_tags(""); ?></p>
        </section>
        <div class="clearfix"></div>
    </article>
  <!-- end post -->
</section></div>
 
<?php get_footer(); ?>

Зверніть увагу: з огляду на SEOдеякі використовують <header> перед заголовками постів, що теж є добрим підходом.

Крок 6. Нарешті, style.css

Все, що нас цікавить наприкінці – питання зворотної сумісності. Перестрахування для старих браузерів, елементи HTML потрібно показувати як блоки, використовуючи стиль дисплей: блок. Просто вставте наведений нижче код на початок вашого style.css:

header, nav, section, article, aside, figure, footer { display: block; }

Примітка

Якщо ви використовуєте аудіо або відео, вбудоване у файл шаблону, вам потрібно використовувати аудіо и відео елементи HTML5. Ви можете переглянути деякі теги в пам'ятці нижче. Коли ви додасте новий функціонал, пошукайте, як додати його на HTML5, використовуючи його семантичні теги.

HTML5 ресурси

  • HTML5 пам'ятка

Безкоштовні шаблони на HTML5

  • Двадцять одинадцять
  • Yoko
  • 15 тем та фреймворків

Ви збираєтеся використовувати HTML5? Ви вже перейшли на HTML5 та зміни вплинули на ваші SEO показники? Розкажіть про це у коментарях!

Джерело: WP.tutsplus.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 3

Сергій Злепко:

Є питання: у наведеному single.php section містить у собі article. Чи не коректніший варіант виду:

(Заголовок посту)
(сам піст)
(теги, дата і т.д.)

Хто порадить?

Emsti:

Блок section призначений для загального вмісту.
Article сприймається пошуковими системами, як пост сайту, тобто основний, головний контент.
Header, якщо розташований одному рівні з іншими семантичними блоками, сприймається, як шапка сайту. Якщо цей блок вкладено в article, footer або інший семантичний блок, не обов'язково виконує роль заголовка, а може містити допоміжну інформацію. Те саме і footer.
Правильніше було б написати так:

Заголовок
Дата, автор та ін.

Власне пост

Теги, рубрики та ін.

В даному випадку блок section може містити декілька блоків article.

Нік Нік:

Пише помилка syntax error, unexpected '<' у рядку

Додати коментар або відгук