Введение

Предварительный просмотр ссылок ( Embed links preview ) - новая функция в WordPress начиная с версии 4.4.

Функция работает следующим образом: если вставить в текст записи URL-ссылку на другую запись или страницу сайта, например:

http://имя_сайта/hello-world/

то при просмотре записи эта ссылка будет отображаться следующим образом:

В данной статье рассмотрим каким образом можно настроить внешний вид такого представления.

Настрйка представления окна "предварительный просмотр ссылок".

1. Размеры окна

Содержимое ссылки выводится в iframe и по умолчанию размер окна на тестовом сайте у меня 600px на 247px. Изменить размер окна можно путем вставки CSS-кода  в файл стилей темы style.css (для настройки используй дочерную тему):

.wp-embedded-content {
	width:100% !important; 
	min-height:250px !important;
}

2. Иконка логотипа

По умолчанию для сайта выводиться иконка логотипа Вордпресс.
Для изменения логотипа нужно вставить его изображение на сайт. Сделать это можно перейдя в административной панели: Внешний вид - Настройка - Общие настройки - Идентификация сайта:

3. Заголовок, изображение, текст краткого описания

Чтобы добавить свои стили CSS в заголовок, изображение и текст краткого описания - нужно подключится к функции embed_head, которая выводит iframe, и добавит наш собственный CSS.
Добавить код нужно в файл functions.php дочерней темы.

// Add style to embed links
add_action( 'embed_head', 'embed_top_style' ); 
function embed_top_style(){ ?>
 <style>
 .wp-embed , .wp-embed-heading , .wp-embed-heading a {
 color:white;
 }
 .wp-embed {
 background-color: black;
 }
 .wp-embed-heading { 
 background-color: black ;
 text-align:center;
 }
 .wp-embed-featured-image img {
 display:none;
 }
 </style> 
<?php }

Результат применения стилей:

4. Нижний колонтитул

Чтобы добавить пользовательский нижний колонтитул под окном предварительного просмотра, нужно подключиться к функции embed_footer. Код ниже добавляет пользовательский нижний колонтитул ниже iframe:

// Add custom footer after embed links preview
add_action( 'embed_footer', 'embed_custom_footer_line' ); 
function embed_custom_footer_line(){ ?>
 <div id="custom-embed-footer">
 <h3>Наша пользовательская строка!</h3>
 </div>
<?php }

Результат применения:

Чтобы настроить нижний колонтитул можно использовать CSS, который мы добавили в:
embed_head для настройки заголовка, изображения и описания (п.3). :

#custom-embed-footer {
 text-align:center;
 background:#EDE3E1;
 top:-15px;
 position:relative;
 padding:1px;
}

Результат применения:

Как отключить функцию

Чтобы отключть аавтоматическую загрузку скрипта, который выполняет эту функцию, добавьте в файл functions.php дочерной темы следующий код:

// Remove jQuery Migrate Script from header and Load jQuery from Google API
function crunchify_stop_loading_wp_embed_and_jquery() {
 if (!is_admin()) {
 wp_deregister_script('wp-embed');
 wp_deregister_script('jquery'); // Bonus: remove jquery too if it's not required
 }
}
add_action('init', 'crunchify_stop_loading_wp_embed_and_jquery');

Если не хотите "заморачиваться" с кодом - используйте плагин Disable Embeds

Любые исправления, идеи, отзывы приветствуются в комментариях, спасибо.

Александр Коваль