Отображение изображения выбранного шаблона в админе, чтобы помочь пользователю при использовании сложных шаблонов

Редактировать:

Кажется, я не очень хорошо себя объяснил …

Я просто пытаюсь добавить изображение в область атрибутов страницы в области администратора в зависимости от того, какой шаблон выбран, вот простой макет того, что я хочу достичь: Dropbox Image Link .


Оригинал:

Я хочу добавить возможность для моих клиентов видеть контур или каркас (изображение) выбранного в данный момент шаблона при редактировании страницы в пределах области администрирования WordPress.

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

Однако я мог бы, конечно, усложнять ситуацию. Поскольку я использую WordPress больше как систему управления контентом с некоторыми довольно уникальными и / или сложными макетами контента (такими как тяжелые макеты сетки с несколькими столбцами и областями содержимого), я просто хочу дать пользователю как можно больше информации о том, для какого поля без записи длинных / сложных имен для каждого блока контента, столбца или позиции сетки.

Если это имеет значение, я использую дополнительные пользовательские поля надстройки (со всеми приобретаемыми дополнениями, такими как поле ретранслятора) и несколько блоков контента.

Области, определенные в шаблоне, необязательно всегда для одного и того же контента, поэтому простое присвоение имен каждой области / блоку «область для соответствия профилю команды», «вставить параграф» здесь, скоро становится неуместным и более запутанным.

Надеюсь, что я предоставил достаточно информации.

Предварительные задачи

  1. Создайте каталог в своей теме, чтобы содержать макеты большого пальца.
  2. Добавьте макеты макета, чтобы отобразить имена файлов вашего шаблона. Следующий сценарий использует формат tpl-homepage.php. Изображение будет называться homepage.jpg.

Обратите внимание, что это доказательство концепции.

Подход 1: только JavaScript

Загрузите следующее только для post.php и post-new.php

add_action('admin_head-post.php', 'template_thumbs'); add_action('admin_head-post-new.php', 'template_thumbs'); function template_thumbs(){ global $post; if($post->post_type != 'page') return; $js = " <script type='text/javascript'> jQuery(document).ready(function($){ //Define the page template select drop-down var _template = $('#page-template'); #Get the thumb on page load if(_template.val()) get_template_thumb(_template.val()); //Sniff template changes _template.change(function(){ //Get template file name var _file = $(this).val(); if(_file) get_template_thumb(_file); }); }); function get_template_thumb(file){ //Define the path to your thumbs directory var _thumb_path = '/wp-content/themes/your-theme/img/layouts/'; //Format thumb filename file.replace('tpl-', ''); file.replace('.php', ''); file = _thumb_path + file + '.jpg'; //Remove previous thumbnail $('.template-thumb').remove(); //Insert thumbnail before the select box $(this).before('<img class=\'template-thumb\' src=\' + file + '\' alt=\'Layout\'>'); } </script> "; echo $js; } 

Подход 2: AJAX + PHP

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

 add_action('admin_head-post.php', 'template_thumbs_script'); add_action('admin_head-post-new.php', 'template_thumbs_script'); function template_thumbs_script(){ global $post; if($post->post_type != 'page') return; $js = " <script type='text/javascript'> jQuery(document).ready(function($){ //Sniff template changes $('#page-template').change(function(){ //Set $_POST data var data = { action: 'get_template_thumb', template: $(this).val() }; //Send XHR $.post(ajaxurl, data, function(response) { if(response){ //remove previous thumb $('.template-thumb').remove(); //Insert thumb before select drop-down $('#page-template').before(response); } }); }); }); </script> "; echo $js; } add_action('wp_ajax_get_template_thumb', 'get_template_thumb'); function get_template_thumb(){ #Verify Nonce #Get template name $template = esc_attr($_POST['template']); #Format image name $img_file = str_replace('tpl-', '', $template); $img_file = str_replace('.php', '', $template); #Assuming this is in functions.php theme root. If not, make absolute path $thumb_path = 'img/layouts/'; #Check if file exists first if(file_exists($thumb_path.$img_file.'.jpg')) #Return an image tag echo "<img class='template-thumb' src='$img_file.jpg' alt='Template Layout'>"; exit; }