HOME>WEBプログラム覚書>[WordPress]WordPressのテーマをミスなく、見やすく、わかりやすくするにはどうしたらいいか。
[WordPress]WordPressのテーマをミスなく、見やすく、わかりやすくするにはどうしたらいいか。
WordPressが5系にメジャーアップデートしたのでそろそろ入れ替えのお仕事のついでに
テーマをきれいにしようかなと思っております。
endifは使わない
完全に個人の好みの問題ではあるのですが、私はendif;が見やすいとは思わないし
endwhile;, endfor;, endforeach;, endswitch;なんて使いたくない。
if ( is_single() ) :
the_title( sprintf( '<h1 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h1>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h2>' );
endif;
いいじゃんこれで。
if ( is_single() ) {
the_title( sprintf( '<h1 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h1>' );
} else {
the_title( sprintf( '<h2 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h2>' );
}
デフォルト値を設定する。
if else、if elseif よりifのみの方が考えなくてはならないことが少なくなる。
アンチパターン
<?php if ( $x === true ) { ?>
<div class="true">True</div>
<?php } else { ?>
<div class="false">False</div>
<?php } ?>
デフォルト値を設定してデフォルト値を使いたくない場合、デフォルト値を変更するようにする。
<?php
$code = '<div class="true">True</div>';
if ( $x !== true ) {
$code = '<div class="false">False</div>';
}
echo $code;
?>
実行は常に1箇所にする
条件分岐の中では実行に必要なパラメータの変更をおこない、実際の実行は1箇所でおこなうようにする。
<?php
if ( is_single() ) :
the_title( sprintf( '<h1 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h1>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s">', esc_url( twentyfifteen_get_link_url() ) ), '</a></h2>' );
endif;
?>
このくらいならまだいいけど、もっと複雑になった場合はしんどくなるはず。
<?php
$tpl = [
'before' => '<h2 class="entry-title"><a href="%s">',
'after' => '</a></h2>'
];
$url = esc_url( twentyfifteen_get_link_url() );
if ( is_single() ) {
$tpl = [
'before' => '<h1 class="entry-title"><a href="%s">',
'after' => '</a></h1>'
];
}
the_title( sprintf( $tpl['before'], $url ), $tpl['after'] );
?>
ちなみthe_*はあまり使わないほうがいいと思っている。get_*で統一しておくと後々変更とか楽になる場合が多い。
HTML/PHPが混ざった行をできる限り避ける
こんなコードを一度は見たことあるのではないでしょうか。
わたしは何度もあります。。。
<a href="#" class="hoge">>テキスト</a>
HTMLとPHPが混じり合った行はミスの元なのでなるべくPHPかHTMLどちらかで統一したほうがよい。
特に属性にPHPコードが入っているとエラーメッセージとか表示されなくて延々とエラー垂れ流す場合もよくある話。
アンチパターン
<li><a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>" class="imprint"><?php $title; ?></a></li>
こう書いたほうがよい。
<?php
echo sprintf(
'<li><a href="%s" class="imprint">%s</a></li>',
esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ),
$title
);
?>
文字列連結は使わない
文字列連結は後々の修正が面倒になることが多いし見にくいので極力使わないほうがよい。
<?php
the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'twentyfifteen' ),
'next_text' => __( 'Next page', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
) );
?>
このくらいならまだいいけど、sprintfのほうが見やすい。
<?php
the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'twentyfifteen' ),
'next_text' => __( 'Next page', 'twentyfifteen' ),
'before_page_number' => sprintf( '<span class="meta-nav screen-reader-text">%s </span>', __( 'Page', 'twentyfifteen' ) ),
) );
?>
Nowdoc、プレースホルダーとかを使う
大量に文字列を連結する場合はヒアドキュメントとかNowdoc、プレースホルダーとかを使うときれいに書ける。
<?php
// Previous/next post navigation.
the_post_navigation( array(
'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentyfifteen' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Next post:', 'twentyfifteen' ) . '</span> ' .
'<span class="post-title">%title</span>',
'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentyfifteen' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Previous post:', 'twentyfifteen' ) . '</span> ' .
'<span class="post-title">%title</span>',
) );
?>
プレースホルダーを処理する関数は、自作してもいいしどっかのフレームワークから取ってくるとかする。
<?php
$tpl_next_text =<<< 'HTML'
<span class="meta-nav" aria-hidden="true">{{ next }}</span>
<span class="screen-reader-text">{{ next_post }}</span>
<span class="post-title">%title</span>
HTML;
$next_text = \Template::render( $tpl_next_text, [
'next' => __( 'Next', 'twentyfifteen' ),
'next_post' => __( 'Previous', 'twentyfifteen' )
]);
$tpl_prev_text =<<< 'HTML'
<span class="meta-nav" aria-hidden="true">{{ prev }}</span>
<span class="screen-reader-text">{{ prev_post }}</span>
<span class="post-title">%title</span>
HTML;
$prev_text = \Template::render( $tpl_prev_text, [
'next' => __( 'Previous', 'twentyfifteen' ),
'next_post' => __( 'Previous post:', 'twentyfifteen' )
]);
// Previous/next post navigation.
the_post_navigation( [
'next_text' => $next_text,
'prev_text' => $prev_text,
] );
?>
複雑な条件分岐はテンプレートに書くのを避ける
<?php
// If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
?>
<p class="no-comments"><?php _e( 'Comments are closed.', 'twentyfifteen' ); ?></p>
<?php endif; ?>
ロジックは適当なクラスのメソッドに押し込んでテンプレートからはこんな感じで使えるようにする。
<?php
// If comments are closed and there are comments, let's leave a little note, shall we?
if ( $app->comment->is_no_comments() ) :
?>
<p class="no-comments"><?php _e( 'Comments are closed.', 'twentyfifteen' ); ?></p>
<?php endif; ?>
とりあえずこんなところ。最終的にはラッパー書くのが一番いいと思う。
投稿日 |
2019年3月11日 05:35 |
カテゴリ |
PHP |
タグ |
WordPress |
トラックバック URL |
http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1799 |
コメント