HOME>WEBプログラム覚書>[WordPress]WordPressのテーマをミスなく、見やすく、わかりやすくするにはどうしたらいいか。

[WordPress]WordPressのテーマをミスなく、見やすく、わかりやすくするにはどうしたらいいか。

WordPressが5系にメジャーアップデートしたのでそろそろ入れ替えのお仕事のついでに テーマをきれいにしようかなと思っております。

endifは使わない

完全に個人の好みの問題ではあるのですが、私はendif;が見やすいとは思わないし
endwhile;, endfor;, endforeach;, endswitch;なんて使いたくない。

  1. if ( is_single() ) :
  2.     the_title( sprintf( '<h1 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h1>' );
  3. else :
  4.     the_title( sprintf( '<h2 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h2>' );
  5. endif;

いいじゃんこれで。

  1. if ( is_single() ) {
  2.     the_title( sprintf( '<h1 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h1>' );
  3. } else {
  4.     the_title( sprintf( '<h2 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h2>' );
  5. }

デフォルト値を設定する。

if else、if elseif よりifのみの方が考えなくてはならないことが少なくなる。

アンチパターン

  1. <?php if ( $x === true ) { ?>
  2.     <div class="true">True</div>
  3. <?php } else { ?>
  4.     <div class="false">False</div>
  5. <?php } ?>

デフォルト値を設定してデフォルト値を使いたくない場合、デフォルト値を変更するようにする。

  1. <?php
  2. $code = '<div class="true">True</div>';
  3. if ( $x !== true ) {
  4.     $code = '<div class="false">False</div>';
  5. }
  6. echo $code;
  7. ?>

実行は常に1箇所にする

条件分岐の中では実行に必要なパラメータの変更をおこない、実際の実行は1箇所でおこなうようにする。

  1. <?php
  2. if ( is_single() ) :
  3.     the_title( sprintf( '<h1 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h1>' );
  4. else :
  5.     the_title( sprintf( '<h2 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h2>' );
  6. endif;
  7. ?>

このくらいならまだいいけど、もっと複雑になった場合はしんどくなるはず。

  1. <?php
  2. $tpl = [
  3.     'before' => '<h2 class="entry-title"><a href="%s">',
  4.     'after'  => '</a></h2>'
  5. ];
  6. $url = esc_url( twentyfifteen_get_link_url() );
  7.  
  8. if ( is_single() ) {
  9.     $tpl = [
  10.         'before' => '<h1 class="entry-title"><a href="%s">',
  11.         'after'  => '</a></h1>'
  12.     ];
  13. }
  14.  
  15. the_title( sprintf( $tpl['before'], $url ), $tpl['after'] );
  16. ?>

ちなみthe_*はあまり使わないほうがいいと思っている。get_*で統一しておくと後々変更とか楽になる場合が多い。

HTML/PHPが混ざった行をできる限り避ける

こんなコードを一度は見たことあるのではないでしょうか。
わたしは何度もあります。。。

  1. <a href="#" class="hoge">>テキスト</a>

HTMLとPHPが混じり合った行はミスの元なのでなるべくPHPかHTMLどちらかで統一したほうがよい。
特に属性にPHPコードが入っているとエラーメッセージとか表示されなくて延々とエラー垂れ流す場合もよくある話。

アンチパターン

  1. <li><a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>" class="imprint"><?php $title; ?></a></li>

こう書いたほうがよい。

  1. <?php
  2. echo sprintf(
  3.     '<li><a href="%s" class="imprint">%s</a></li>',
  4.     esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ),
  5.     $title
  6.     );
  7. ?>

文字列連結は使わない

文字列連結は後々の修正が面倒になることが多いし見にくいので極力使わないほうがよい。

  1. <?php
  2. the_posts_pagination( array(
  3.     'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
  4.     'next_text'          => __( 'Next page', 'twentyfifteen' ),
  5.     'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
  6. ) );
  7. ?>

このくらいならまだいいけど、sprintfのほうが見やすい。

  1. <?php
  2. the_posts_pagination( array(
  3.     'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
  4.     'next_text'          => __( 'Next page', 'twentyfifteen' ),
  5.     'before_page_number' => sprintf( '<span class="meta-nav screen-reader-text">%s </span>', __( 'Page', 'twentyfifteen' ) ),
  6. ) );
  7. ?>

Nowdoc、プレースホルダーとかを使う

大量に文字列を連結する場合はヒアドキュメントとかNowdoc、プレースホルダーとかを使うときれいに書ける。

  1. <?php
  2. // Previous/next post navigation.
  3. the_post_navigation( array(
  4.     'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' .
  5.         '<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .
  6.         '<span class="post-title">%title</span>',
  7.     'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</span> ' .
  8.         '<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .
  9.         '<span class="post-title">%title</span>',
  10. ) );
  11. ?>

プレースホルダーを処理する関数は、自作してもいいしどっかのフレームワークから取ってくるとかする。

  1. <?php
  2. $tpl_next_text =<<< 'HTML'
  3. <span class="meta-nav" aria-hidden="true">{{ next }}</span>
  4. <span class="screen-reader-text">{{ next_post }}</span>
  5. <span class="post-title">%title</span>
  6. HTML;
  7.  
  8. $next_text = \Template::render( $tpl_next_text, [
  9.     'next'      => __( 'Next', 'twentyfifteen' ),
  10.     'next_post' => __( 'Previous', 'twentyfifteen' )
  11. ]);
  12.  
  13. $tpl_prev_text =<<< 'HTML'
  14. <span class="meta-nav" aria-hidden="true">{{ prev }}</span>
  15. <span class="screen-reader-text">{{ prev_post }}</span>
  16. <span class="post-title">%title</span>
  17. HTML;
  18.  
  19. $prev_text = \Template::render( $tpl_prev_text, [
  20.     'next'      => __( 'Previous', 'twentyfifteen' ),
  21.     'next_post' => __( 'Previous post:', 'twentyfifteen' )
  22. ]);
  23.  
  24. // Previous/next post navigation.
  25. the_post_navigation( [
  26.     'next_text' => $next_text,
  27.     'prev_text' => $prev_text,
  28. ] );
  29. ?>

複雑な条件分岐はテンプレートに書くのを避ける

  1. <?php
  2. // If comments are closed and there are comments, let's leave a little note, shall we?
  3. if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
  4. ?>
  5.     <p class="no-comments"><?php _e( 'Comments are closed.', 'twentyfifteen' ); ?></p>
  6. <?php endif; ?>

ロジックは適当なクラスのメソッドに押し込んでテンプレートからはこんな感じで使えるようにする。

  1. <?php
  2. // If comments are closed and there are comments, let's leave a little note, shall we?
  3. if ( $app->comment->is_no_comments() ) :
  4. ?>
  5.     <p class="no-comments"><?php _e( 'Comments are closed.', 'twentyfifteen' ); ?></p>
  6. <?php endif; ?>

とりあえずこんなところ。最終的にはラッパー書くのが一番いいと思う。

参照サイト

投稿日 2019年3月11日 05:35
カテゴリ PHP
タグ WordPress
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1799

コメント

コメントする
Name
Email Address
URL