Как изменить фоновое изображение из WordPress Gallery

Я создаю пользовательскую тему для клиента в WordPress:

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

  • Создать новую галерею в сообщении
  • »Пользователь нажимает миниатюру
  • »Своп фонового изображения
  • »Нажимает другое миниатюру
  • »Снова меняет фоновое изображение

Буду признателен за любую оказанную помощь.

Solutions Collecting From Web of "Как изменить фоновое изображение из WordPress Gallery"

Фоновое изображение применяется к элементу <body> , поэтому, используя jQuery, вам действительно нужно добавить обработчик .click() в элемент $('dt.gallery-icon img') , захватив его атрибут src и применяя его к background-image тела.

EDIT: Я думал, что это будет интересное упражнение, так что вот плагин, который делает то, что вы хотите (насколько я понял). Перейдите в wp-content/plugins и создайте новый файл. Назовите это, как хотите. Вставьте это в свой новый файл. Затем перейдите в конец WordPress Admin и активируйте новый плагин.

 <?php /* Plugin Name: SE-32426 BackgroundGallery Plugin URI: http://wordpress.stackexchange.com/questions/32426/how-to-change-background-image-from-wordpress-gallery Description: Click on any image of a default WP gallery, and that image is displayed in the background image. Author: @TomAuger Author URI: http://www.tomauger.com License: GPL2 */ class SE32426_BackgroundGallery { // Make sure jQuery is loaded. If it already is, then this will do nothing. static function enqueue_jquery(){ wp_enqueue_script( 'jquery' ); } // Add our own javaScript to the top of the WordPress gallery section. // Another way to do this would be to create a separate .js file and enqueue it like we did above. static function add_gallery_script( $output ){ $output .= <<<END_JAVASCRIPT <script type="text/javascript"> jQuery(document).ready(function($) { $('dl.gallery-item img').click(function(event){ // Prevent the click from actually going through and linking to the attachment post page event.preventDefault(); // The image we clicked on is probably a thumbnail. We want the full image. thumbImg = $(this).attr('src'); fullImg = thumbImg.replace(/-[^-.]+(\..+)$/, "$1"); // Set the body's background image to the image we just clicked on. $('body').css('background-image', 'url(' + fullImg + ')'); }); }); </script> END_JAVASCRIPT; return $output; } } add_action( 'init', array( 'SE32426_BackgroundGallery', 'enqueue_jquery' ) ); add_filter( 'gallery_style', array( 'SE32426_BackgroundGallery', 'add_gallery_script' ) );