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

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

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

Усього є 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:

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

Для візуального налаштування нам потрібен код 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>

Висновок

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

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

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

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

knaipa:

Як би так, але не уявляю навіщо може стати в нагоді. Всяко простіше шоркодами, ніж створювати якісь рамки собі у вигляді тих самих 9 форматів сторінок. Ні?

Mihail Chumachkin:

Внутрішній редактор WordPress TinyMCE просто жахливий та вимагає допилювання напилком.
Підключення стилів плюс створення шаблонів (http://wordpress.org/extend/plugins/simple-post-template/) допомагає частково зняти геморой.

Підключення JavaScript це чудово.
У таких статтях завжди є особливість. У цій, я собі знайшов родзинку, це підключення javascript-a.

Дякую цьому сайт за переклади та пошук матеріалів.

Чи можу я дати деякі посилання на цікаві матеріали (посилання на цікаві матеріали) WordPress?

Бо, дивлюся, тут усі з одного й того самого сайту переклади.

WordPresso:

Так, звичайно, залишайте посилання на матеріали! Якщо що, ми обов'язково опублікуємо та підготуємо статті щодо нової корисної інформації.

Dmitry:

Так, багато разів звертав увагу на різні формати. Але чим звичайний пост із відео відрізняється від такого ж посту у відорформаті, незрозуміло.

Юрій:

Цікава можливість, але поки обходитимуся без неї.

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