使用WordPress的主题定制器选择在预览中更新布局的页面模板

我不知道该把这个问题贴在哪里。。

我最近发现了WordPress的“主题定制器”，并正在使用它使页面更容易为客户端更新。与编辑每个单独页面、单击更新然后访问页面查看更改的标准方式不同，我喜欢主题定制器如何在右侧自动预览您的更改。

在我全力以赴做这件事之前，我正试图了解我可以与主题定制器一起走多远。。。

我创建了一个“主页”设置/分区/控件，如图所示：

下面是代码：

function get_page_templates_select() {
 $teh_cats = get_page_templates();
 foreach ( $teh_cats as $template_name => $template_filename ) {
     if (stripos(strtolower($template_filename), \'home\') !== false) {
        $results[$template_filename] = $template_name;
     }
   }
   return $results;
   echo $results;
}

function get_categories_select() {
 $teh_cats = get_categories();
    $results;
    $count = count($teh_cats);
    for ($i=0; $i < $count; $i++) {
      if (isset($teh_cats[$i]))
        $results[$teh_cats[$i]->slug] = $teh_cats[$i]->name;
      else
        $count++;
    }
  return $results;
}

function prowordpress_customize_register( $wp_customize ) {

    // Settings, Sections, and Controls are defined here

    // HOME PAGE

    $wp_customize->add_setting( \'home_page_text\' , array(
        \'default\'           => \'This is the home page text\',
        \'type\'              => \'option\',
        \'transport\'         => \'refresh\',
    ));
    $wp_customize->add_section( \'prowordpress_content_customizations\' , array(
        \'title\'       => __(\'Home Page\', \'prowordpress\'),
        \'description\' => __(\'Modify the Home Page\', \'prowordpress\'),
        \'priority\'    => 30,
    ));
    $wp_customize->add_control( \'home_page_text_control\', array(
        \'label\'      => __( \'Home Page Text\', \'prowordpress\' ),
        \'section\'    => \'prowordpress_content_customizations\',
        \'settings\'   => \'home_page_text\',
        \'type\'       => \'textarea\',
    ));

    $wp_customize->add_setting( \'home_page_template_select\' , array(
        \'default\'           => \'test\',
        \'type\'              => \'theme_mod\',
        \'transport\'         => \'refresh\',
    ));
    $wp_customize->add_control(
        new WP_Customize_Control(
            $wp_customize,
            \'home_page_template_select\',
            array(
                \'label\'          => __( \'Home page template:\', \'blankwptheme\' ),
                \'section\'        => \'prowordpress_content_customizations\',
                \'settings\'       => \'home_page_template_select\',
                \'type\'           => \'select\',
                \'choices\'        => get_page_templates_select(),
            )
        )
    );

    $wp_customize->add_setting( \'home_page_posts_select\' , array(
        \'default\'           => \'test\',
        \'type\'              => \'theme_mod\',
        \'transport\'         => \'refresh\',
    ));
    $wp_customize->add_control(
        new WP_Customize_Control(
            $wp_customize,
            \'home_page_posts_select\',
            array(
                \'label\'          => __( \'Which post type to display on the home page?\', \'blankwptheme\' ),
                \'section\'        => \'prowordpress_content_customizations\',
                \'settings\'       => \'home_page_posts_select\',
                \'type\'           => \'select\',
                \'choices\'        => get_categories_select(),
            )
        )
    );

}

add_action( \'customize_register\', \'prowordpress_customize_register\' );

主页1模板：

<?php /* Template Name: Home */

get_header();

echo "theme selected: " . get_theme_mod(\'home_page_template_select\');

$page_id = 5;
update_post_meta( $page_id, \'_wp_page_template\',    get_theme_mod(\'home_page_template_select\') );

?>

<div style="margin-top:60px;">

    <?php echo get_option(\'home_page_text\'); ?>

</div>

<div style="margin-top:60px;">

    <?php
  $args = array(
    \'category_name\' => get_theme_mod(\'home_page_posts_select\'),
    \'posts_per_page\' => 5
  );

  // Displays the category\'s name
  echo "<h3>" . get_category_by_slug($args[\'category_name\'])->name . "    </h3>";
  $the_query = new WP_Query( $args );

   // The Loop
  if ( $the_query->have_posts() ) :
     //echo "<ul>";
    while ( $the_query->have_posts() ) : $the_query->the_post();
      if(has_post_thumbnail($post->ID)){ 
        $thumbsrc = get_the_post_thumbnail($post->ID,\'medium\'); 
      } else {
        $thumbsrc = "<img src=\\"images/no_featured_image.jpg\\" alt=\\"" . get_the_title() . "\\">";
      }
      $link = get_permalink();
      $title = get_the_title();
      $content = get_the_content();
      echo \'<div style="width:302px;float:left;height:502px;margin- right:20px;">\';
     echo $thumbsrc . \'<br>\';
      echo \'<a href="\' . $link . \'">\'  . $title . \'</a><br>\' . $content;
      echo \'</div>\';
    endwhile;
    //echo "</ul>";
  endif;

  // Reset Post Data
  wp_reset_postdata();

?>

</div>

<?php get_footer(); ?>

你可以在截图中看到我为“主页模板”添加了一个选择菜单。。。

我是否可以将其设置为客户端可以从此选择菜单中选择现有的“页面模板”，然后让右侧的页面预览/布局自动继承页面模板设置并实时调整布局？

再一次，我只是想知道这是否可行，是否有人曾经尝试过类似的东西。我意识到这可能需要一些AJAX或类似的东西。

谢谢你的帮助！

相关推荐