使用 Timber 重构复杂的 Wordpress 模板

Question

我被带去重新设计一个大学部门的 Wordpress 网站，我一直在尝试使用 Timber 来使模板更清洁和更易于维护。

到目前为止，一切进展顺利，但我在将这个学位指南模板导入控制器 + 视图设置时遇到了很多麻烦。

学位和课程都有自定义帖子类型。学位指南中还有一个自定义分类法，用于将课程按学期和年份分类。

我在下面的指南中包含了大一新生的代码以及指向整个模板要点的链接。

我真的只是不确定从哪里开始。因此，非常感谢任何帮助、指针或资源！

  <?php if (is_single ( '19871' )) { 
      $freshmandegreeterms = 'freshman-year-bfa-filmmaking';
     $springfreshmandegreeterms = 'spring-freshman-year-bfa-filmmaking';
     $fallfreshmandegreeterms = 'fall-freshman-year-bfa-filmmaking';
      } elseif (is_single ( '19872' )) { 
      $freshmandegreeterms = 'freshman-year-bs-mis';
     $springfreshmandegreeterms = 'spring-freshman-year-bs-mis';
     $fallfreshmandegreeterms = 'fall-freshman-year-bs-mis';
      } elseif (is_single ( '19873' )) { 
      $freshmandegreeterms = 'freshman-year-bm-mis';
     $springfreshmandegreeterms = 'spring-freshman-year-bm-mis';
     $fallfreshmandegreeterms = 'fall-freshman-year-bm-mis';
      }
      elseif (is_single ( '19874' )) { 
      $freshmandegreeterms = 'freshman-year-ba-pop';
     $springfreshmandegreeterms = 'spring-freshman-year-ba-pop';
     $fallfreshmandegreeterms = 'fall-freshman-year-ba-pop';
      }
      ?>
    <h2>Freshman Year</h2>
    <div id="freshmanyear" class="row">
      <div id="freshmanfall"  class="medium-6 large-6 columns">
        <table>
          <tr>
            <td style="font-weight:bold;">Fall</td>
          </tr>
          <?php
  $fallfreshmanquery = new WP_Query( array ( 'post_type'      => 'course',
    'posts_per_page' => 20,
      'order' => ASC,
    'orderby' => 'menu_order',
     'tax_query' => array(
        array(
            'taxonomy' => 'degree-requirement',
            'terms' => $fallfreshmandegreeterms,
            'field' => 'slug'
        )
    ) ) );
while ( $fallfreshmanquery->have_posts() ) : $fallfreshmanquery->the_post();
?>
          <tr>
            <td><a href="#" data-reveal-id="myModal<?php the_ID(); ?>">
              <?php the_title(); ?>
              </a>
              <div id="myModal<?php the_ID(); ?>" class="reveal-modal" data-reveal>
              <?php the_content(); ?><br/>
                  <?php if ( get_post_meta( get_the_ID(), 'wpcf-credit-hours', true ) ) : ?>
                Credit Hours : <?php echo get_post_meta( get_the_ID(), 'wpcf-credit-hours', true ); ?>
                <?php endif; ?>

                <a class="close-reveal-modal">&#215;</a> </div></td>
          </tr>
          <?php endwhile;   ?>
        </table>
      </div>
      <!-- end freshman fall -->
      <div id="freshmanspring"  class="medium-6 large-6 columns">
        <table>
          <tr>
            <td style="font-weight:bold;">Spring</td>
          </tr>
          <?php
  $springfreshmanquery = new WP_Query( array ( 'post_type'      => 'course',
    'posts_per_page' => 20,
      'order' => ASC,
    'orderby' => 'menu_order',
     'tax_query' => array(
        array(
            'taxonomy' => 'degree-requirement',
            'terms' => $springfreshmandegreeterms,
            'field' => 'slug'
        )
    ) ) );
while ( $springfreshmanquery->have_posts() ) : $springfreshmanquery->the_post();
?>
          <tr>
            <td><a href="#" data-reveal-id="myModal<?php the_ID(); ?>">
              <?php the_title(); ?>
              </a>
              <div id="myModal<?php the_ID(); ?>" class="reveal-modal" data-reveal>
                <h2>
                  <?php the_title(); ?>
                </h2>
                <p>
                  <?php the_content(); ?><br/>
                  <?php if ( get_post_meta( get_the_ID(), 'wpcf-credit-hours', true ) ) : ?>
                Credit Hours : <?php echo get_post_meta( get_the_ID(), 'wpcf-credit-hours', true ); ?>
                <?php endif; ?>
                </p>
                <a class="close-reveal-modal">&#215;</a> </div></td>
          </tr>
          <?php endwhile;   ?>
        </table>
      </div>
      <!-- end freshman Spring --> 
    </div>
    <!-- end freshman year -->

这是full gist的链接。

Answer 1

不是一个具体的问题，但这里有一些可能会有所帮助的事情。

您可以为某些控制器逻辑创建一个 wordpress 自定义插件（一个类）。在这个插件中，它可以确定 $freshmandegreeterms 值。

您可以对 $freshmandegreeterms 的值进行排序的一种方法是创建一个接受参数的函数 - 即“19874”。比如：

public function set_freshman_terms( $code ) {
    $terms = [ 
       //Add necessary terms below
      '19871' => 'freshman-year-bfa-filmmaking',
      '19872' => 'freshman-year-bs-mis',
    ]

    $term = $terms[$code];

    $freshman           = [];
    $freshman['term']   = $term;
    $freshman['fall']   = 'fall-'.$term;
    $freshman['spring'] = 'spring-'.$term;

    //Set context
    $context['freshman'] = $freshman;
}

您甚至可以将该函数提取为更小的函数。但是，在您的视图中使用 twig 将这些数据称为：

{{ freshman.term }}
{{ freshman.fall }}
{{ freshman.spring }}