Статьи

Настройка содержимого WordPress

WordPress позволяет очень легко встраивать контент. Например, вы можете получить URL-адрес YouTube, вставить его в редактор сообщений и автоматически увидеть видео, встроенное в ваше сообщение. Все это работает на oEmbed , открытом стандарте того, как страница должна предоставлять данные для встраивания кода.

WordPress использует этот стандарт для получения и отображения предоставленного URL. Хотя WordPress уже давно может использовать oEmbed-провайдеров, таких как YouTube, с включением WP-API в WordPress 4.4 , WordPress теперь может функционировать как oEmbed-провайдер. Это означает, что другие сайты могут встраивать ваш контент WordPress на свои сайты так же легко, как вы можете вставлять видео в настоящее время, как указано в примере выше.

Новая функция провайдера oEmbed использует WP-API для возврата структурированных данных встраивания JSON или XML потребителям oEmbed, предоставляя им информацию, необходимую им для встраивания страницы самостоятельно. Как и все в WordPress, функциональность провайдера oEmbed легко модифицируется с помощью действий и фильтров . Давайте посмотрим, как мы можем использовать эти хуки для встраивания пользовательских типов записей.

Встроенный WordPress

Что мы будем строить

Мы собираемся создать простой плагин «Обновление статуса», который регистрирует пользовательский тип записи (СРТ), status-update Этот CPT просто удаляет ввод заголовка в редакторе сообщений, превращая его в функцию обновления статуса Facebook или Twitter. Мы настроим вывод oEmbed этого поста, чтобы показать имя пользователя и аватар. Вы можете увидеть конечный продукт в этом репозитории GitHub .

Настройка плагина

Перейдите в папку с pluginswp-contentsp-status-update В этом каталоге создайте файл с именем sp-status-update.php Здесь мы будем создавать основной класс плагина. Добавьте заголовок плагина в начало файла:

 /**
 * Plugin Name: Status Update
 * Plugin URI:  https://github.com/mAAdhaTTah/sitepoint-status-update
 * Description: Post your own Facebook-like status updates
 * Version:     1.0.0
 * Author:      James DiGioia for SitePoint
 * Author URI:  http://jamesdigioia.com
 * Text Domain: wp-status-update
 * Languages:   /languages
 */

Затем мы настроим основной плагин синглтон, на котором мы будем строить наш плагин:

 class SP_Status_Update {

    /**
     * Plugin instance.
     *
     * @var static
     */
    protected static $instance;

    /**
     * Retrieve the plugin instance.
     *
     * @return static
     */
    public static instance() {
        if (null === static::$instance) {
            static::$instance = new static;
        }

        return static::$instance;
    }

    /**
     * Plugin constructor.
     */
    protected function __construct() {
        // Add actions/filters here
    }
}

Наконец, нам нужно запустить плагин внизу файла:

 SP_Status_Update::instance();

Мы добавим наши хуки и фильтры в конструктор, как отмечено в комментарии.

Зарегистрировать пользовательский тип сообщения

Используя отличный GenerateWP , мы можем легко настроить и зарегистрировать наш собственный тип записи. Зарегистрируйте метод в WordPress:

     add_action( 'init', array( $this, 'register_post_type' ), 0 );

и добавьте метод регистрации в ваш класс:

     /**
     * Register the Status Update custom post type.
     */
public function register_post_type() {
    $labels = array(
        'name'                  => _x( 'Status Updates', 'Post Type General Name', 'sp-status-update' ),
        'singular_name'         => _x( 'Status Update', 'Post Type Singular Name', 'sp-status-update' ),
        'menu_name'             => __( 'Status Update', 'sp-status-update' ),
        'name_admin_bar'        => __( 'Status Update', 'sp-status-update' ),
        'archives'              => __( 'Satus Update Archives', 'sp-status-update' ),
        'parent_item_colon'     => __( 'Parent Update:', 'sp-status-update' ),
        'all_items'             => __( 'All Updates', 'sp-status-update' ),
        'add_new_item'          => __( 'Add New Status Update', 'sp-status-update' ),
        'add_new'               => __( 'Add New', 'sp-status-update' ),
        'new_item'              => __( 'New Status Update', 'sp-status-update' ),
        'edit_item'             => __( 'Edit Status Update', 'sp-status-update' ),
        'update_item'           => __( 'Update Status Update', 'sp-status-update' ),
        'view_item'             => __( 'View Status Update', 'sp-status-update' ),
        'search_items'          => __( 'Search Status Updates', 'sp-status-update' ),
        'not_found'             => __( 'Not found', 'sp-status-update' ),
        'not_found_in_trash'    => __( 'Not found in Trash', 'sp-status-update' ),
        'featured_image'        => __( 'Featured Image', 'sp-status-update' ),
        'set_featured_image'    => __( 'Set featured image', 'sp-status-update' ),
        'remove_featured_image' => __( 'Remove featured image', 'sp-status-update' ),
        'use_featured_image'    => __( 'Use as featured image', 'sp-status-update' ),
        'insert_into_item'      => __( 'Insert into Status Update', 'sp-status-update' ),
        'uploaded_to_this_item' => __( 'Uploaded to this Status Update', 'sp-status-update' ),
        'items_list'            => __( 'Status Updates list', 'sp-status-update' ),
        'items_list_navigation' => __( 'Status Updates list navigation', 'sp-status-update' ),
        'filter_items_list'     => __( 'Filter Status Updates list', 'sp-status-update' ),
    );
    $args = array(
        'label'                 => __( 'Status Update', 'sp-status-update' ),
        'description'           => __( 'Simple Status Update', 'sp-status-update' ),
        'labels'                => $labels,
        'supports'              => array( 'editor', 'author', ),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 5,
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => true,
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'capability_type'       => 'page',
    );
    register_post_type( 'sp_status_update', $args );
}

Теперь мы готовы начать настраивать наш вывод oEmbed!

Прежде чем мы начнем: как работает oEmbed

Когда вы добавляете ссылку в редактор TinyMCE, откуда он знает, как встроить этот URL в ваш редактор?

Первый шаг – это открытие. oEmbed просит провайдеров «сделать обнаружение их поддержки oEmbed добавлением элементов в заголовок их существующих (X) HTML-документов». Эти элементы направляют потребителей oEmbed к конечным точкам API, которые затем обеспечивают структурированное представление встроенной публикации. oEmbed поддерживает форматы JSON и XML.

WordPress включает в себя элементы и поддержку обоих форматов. Функция [wp_oembed_add_discovery_links]wp_head<head>oembed_discovery_links{
"version": "1.0",
"provider_name": "Website Name",
"provider_url": "http://example.com",
"author_name": "admin",
"author_url": "http://example.com/author/admin/",
"title": "",
"type": "rich",
"width": 600,
"height": 338,
"html": "long string of html"
}

Оттуда редактор получает структурированную версию из конечной точки API. Ответ JSON выглядит следующим образом:

 html

XML-ответ структурирован одинаково, и WordPress обеспечивает поддержку для обоих. Он использует WP-API для предоставления ответов в формате JSON и XML, хотя для ответа XML требовалась специальная обработка.

Редактор использует этот ответ, дезинфицируя ключ blockquote В WordPress HTML-код oEmbed содержит блочную цитату с заголовком сообщения, <script>iframeiframe Этот HTML- [get_post_embed_html]embed_htmliframe

В URL embed_template По умолчанию он импортирует встроенный шаблон для встраивания, но вы можете полностью его переопределить и использовать свой собственный шаблон для встраивания. Используйте фильтр add_filter( 'embed_template', 'my_embed_template' );
function my_embed_template( $template ) {
if ( 'custom_post_type' === get_post_type() ) {
return '/path/to/custom-embed-template.php';
}

return $template;
}

 the_title

По большей части вам не нужно настраивать какие-либо из перечисленных выше фильтров, но полезно ознакомиться с внутренними компонентами поставщика oEmbed, чтобы использовать его более эффективно. Если вам нужна эта сила, она есть. Мы собираемся изменить встроенный шаблон с помощью хуков и фильтров, которые он делает доступными для нас.

Настройка заголовка oEmbed

Поскольку плагин внедряет обновление статуса, первое, что мы должны сделать, это удалить заголовок из вывода oEmbed. Для этого нам нужно подключиться к фильтру add_filter( 'the_title', array( $this, 'remove_embed_title' ), 10, 2 );

 remove_embed_title

В is_embedtrue Эта функция возвращает /**
* Remove the title from the Status Update oembed.
*
* @param string $title Post title.
* @param int $id Post ID.
*
* @return string
*/
public function remove_embed_title( $title, $id ) {
$post = get_post( $id );

if ( is_embed() && 'sp_status_update' === $post->post_type ) {
return '';
}

return $title;
}

Вот как мы удаляем заголовок:

 is_oembed

Это гарантирует, что заголовок удаляется только в oEmbed. Теперь, если бы мы создавали этот плагин более полно, нам, возможно, не нужно включать проверку the_excerpt_embed

Настройка отрывка oEmbed

Поскольку обновления статуса должны быть небольшими кусочками, мы не хотим отображать отрывок, а весь пост. Мы можем изменить то, что получается, отфильтровав хук add_filter( 'the_excerpt_embed', array( $this, 'get_excerpt_embed' ) );

 /**
 * Returns the custom excerpt for the custom post type.
 *
 * @param  string $output Default embed output.
 * @return string         Customize embed output.
 */
public function get_excerpt_embed( $output ) {
    if ( 'sp_status_update' === get_post_type() ) {
      return get_the_content();
    }

    return $output;
}

Затем мы проверяем, является ли текущий тип записи нашим собственным типом записи, и если это так, мы возвращаем полный вывод содержимого:

 div

Это гарантирует, что отрывок всегда является полным пост-контентом для обновления статуса. В iframe этот отрывок выводится в wp-embed-excerptdiv Если вы хотите сделать что-то более сложное, например, событие календаря, вы можете вывести свой пользовательский контент в этот embed_contentoembed_contentadd_action( 'embed_content', array( $this, 'embed_author' ) );

Добавление дополнительного содержимого в oEmbed

Действие /**
* Add the author div to the embed iframe.
*/
public function embed_author() {
if ( 'sp_status_update' !== get_post_type() ) {
return;
}

$output = '<div class="wp-embed-author">';
$output .= '&mdash; ';
$output .= get_the_author();
$output .= get_avatar( get_the_author_meta( 'ID' ), 20 );
$output .= '</div>';

echo $output;
}
Для плагина Обновление статуса мы будем использовать его для вывода имени автора и аватара. Сначала добавим действие:

 embed_head

Мы можем использовать этот хук действия, чтобы повторить наш собственный HTML:

 head

У нас есть простой emdash, имя автора и аватар автора. Опять же, если вам нужна более обширная настройка, это действие дает возможность вывести любой дополнительный пользовательский HTML.

Добавление пользовательских стилей и скриптов в oEmbed

Как и у стандартной страницы шаблона, шаблон oEmbed имеет верхний и нижний колонтитулы. Хук add_action( 'embed_head', array( $this, 'embed_styles' ) );
Как и мы, прикрепите ваш метод к крючку:

 wp_enqueue_style

Мы можем использовать этот хук, чтобы поставить в очередь наши собственные стили с помощью стандартной функции /**
* Embed the plugin's custom styles
*/
public function embed_styles() {
echo <<<CSS
<style>
.wp-embed-excerpt, .wp-embed-author {
font-size: 24px;
line-height: 24px;
margin-bottom: 5px;
}

.wp-embed-author {
float: right;
}
</style>
CSS;
}

 embed_footer

Со стороны JavaScript мы можем сделать то же самое, используя действие wp_enqueue_script

Вывод

Это основные крючки, с которыми вам нужно взаимодействовать, чтобы преобразовать вывод в ваши предпочтения. Весь код в этом руководстве можно найти в репозитории GitHub .

Если вы хотите увидеть эти настройки в действии, следите за следующей версией WP-Gistpen , которая будет использовать провайдер WordPress oEmbed для внедрения синтаксиса выделенных фрагментов кода.

Как вы планируете использовать функцию провайдера oEmbed в WordPress? Дай мне знать в комментариях!