Як навчити візуальний редактор WordPress роботі з новими форматами постів

Ще з виходом WordPress 3.1 з'явилася нова опція під назвою Формати постів (Post Formats). Вона дала можливість авторам вибирати для своїх постів один із 9 основних форматів Розробники тем змушені були додавати до своїх тем підтримку для кожного з форматів постів, а також додаткові теги і CSS для сумісності та надання повної функціональності користувачам своїх тем у зв'язку з цими змінами. Кожен із форматів міг відображатися з іншою структурою та дизайном, хоча в самому редакторі постів у wp-admin Консолі ця різниця була помітна.

У цьому практичному посібнику мова піде про те, як налаштувати вашу тему оформлення на відображення цитата в окремому форматі, щоб бачити відмінність в оформленні в редакторі постів під час написання нового запису в редакторі.

Щось про формати постів

Усього є 9 форматів для постів, які підтримуються у темі оформлення:

1. У бік
2. Галерея
3. Відео
4. аудіо
5. зображення
6. Статус
7. посилання
8. Quote
9. чат

Про них ви можете прочитати у статті Post Formats Inside and Out.

Крок 1. Додаємо підтримку форматів для постів

Спочатку давайте переконаємось, що наша тема підтримує формати постів та стилі для редактора. Для цього нам потрібно додати наступний код у файл functions.php:

// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();
// Add support for the quote post formats
add_theme_support( 'post-formats', array( 'quote' ) );

Підказка: Не забудьте, що при додаванні PHP у файл треба починати з тега, що відкриває <?php та закривати тегом ?>інакше у вас буде відображатися код HTML, а не виконувати код PHP.

Крок 2. Файл із цитуванням контенту

Щоб контролювати відображення на сторінці нашого посту у форматі цитати, створимо файл під назвою content-quote.php. Це шаблон нашої сторінки з цитатою, і його треба помістити до папки з нашою темою. Ось який код слід додати:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="post-content">
        <?php the_content( '' ); ?>
    </div>
</article>

Цей шаблон використовуватиметься на головній та на архівній сторінках, і часто його викликають прямо з файлу index.php за допомогою наступного коду:

<?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>

Крок 3. Створюємо CSS

Ось приклад того, як пост у форматі цитати виглядає у темі оформлення Gridiculous:

Для візуального налаштування нам потрібен код CSS:

/* =Quote
-------------------------------------------------------------- */
.format-quote .post-content {
    font-size: 18px;
    line-height: 27px;
    padding-left: 50px;
    font-style: italic;
}
.format-quote p,
.format-quote blockquote {
    margin: 0;
}
.format-quote:before {
    font-family: Georgia, serif;
    color: #999;
    display: block;
    font-size: 100px;
    width: 50px;
    content: '\201C';
    height: 0;
    top: -40px;
    position: relative;
}
.format-quote blockquote {
    border: 0;
    padding: 0;
    font-size: 18px;
    color: #555;
}
cite {
    text-align: right;
    font-style: normal;
    display: block;
    margin-bottom: 10px;
}
cite:before {
    content: '\2013 \00A0';
}

Наведений вище CSS треба включити у файл style.css нашої теми оформлення, а також створити файл editor-style.css та додати його до нашої теми. Ця таблиця стилів — те, що ми будемо використовувати для перегляду нашого посту у візуальному редакторі.

Крок 4. Магія jQuery

Майже всі ефекти, доступні вам на панелі адміністрування WordPress, створені із застосуванням jQuery. Оскільки він вже є на сторінці адміністрування, давайте використовуємо його і в роботі візуального редактора з нашими новими форматами постів та їх стилями.

Якщо у вас ще немає папки / js у вашій темі, створіть її та додайте до неї новий файл під назвою editor-styles-post-format.js. Як тільки створіть файл, відкрийте його і в текстовому редакторі додайте наступний код:

( function($) {
    $(window).load( function() {
        var init_post_format = $( '#post-formats-select' ).find( '.post-format:checked' ).val();
        add_post_format( init_post_format );
    } );
    $( '#post-formats-select' ).find( '.post-format' ).change( function() {
        var post_format = $(this).val();
        add_post_format( post_format );
    } );
    function add_post_format( post_format ) {
        post_format = ( 0 == post_format ) ? 'standard' : post_format;
        if ( frames['content_ifr'] )
            $( 'html', frames['content_ifr'].document ).removeClass().addClass( 'format-' + post_format );
    }
} )(jQuery);

Тепер, коли у нас готовий jQuery-Скрипт, нам треба створити до нього запит, щоб він спрацьовував щоразу, коли ми здійснюємо переходи в панелі адміністрування. Ось ще невеликий блок коду, який треба додати до нашого файлу functions.php:

add_action( 'admin_enqueue_scripts', 'editor_style_admin_script' );
function editor_style_admin_script( $hook ) {
    if ( 'post-new.php' == $hook || 'post.php' == $hook )
        wp_enqueue_script( 'editor_styles_post_format_js', get_template_directory_uri() . '/js/editor-styles-post-format.js', true, array( 'jquery' ), '1.0.0' );
}

Крок 5. Пишемо цитату

Все на своїх місцях, і саме час вибрати формат нашого нового посту. Щоразу, як ми це робитимемо, клас буде додаватися до нашого візуального редактора так само, як він додається до відображення вмісту на сторінці. І так ми зможемо побачити, як виглядатиме наш пост в очах читача ще в процесі написання цього посту з цитатою. Нам треба просто переконатися, що ми використовуємо наступний HTML-код для створення нової цитати, щоб коректно спрацьовували стилі CSS:

<blockquote>
    Only one thing is impossible for God: To find any sense in any copyright law on the planet.
    <cite>
        <a href="http://www.brainyquote.com/quotes/quotes/m/marktwain163473.html">
            Mark Twain
        </a>
    </cite>
</blockquote>

Висновок

Наведений посібник складається з кількох кроків, але зрештою в ньому немає нічого складного, і ваш візуальний редактор почне коректно працювати з форматами постів. На щастя, багато тем оформлення вже включено більшість з наведених елементів, так що вам просто треба буде створити новий файл JavaScript та запит сценарію до нього. Можливо, у майбутньому ця функціональність навіть стане частиною ядра WordPress за рахунок створення спеціального патчу. Якщо ви маєте зауваження або побажання до описаного способу роботи з новими форматами постів, ви завжди можете їх висловити в коментарях.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/