はじめに
最近wordpressのテーマを作ることが多いのですが、そろそろ頻出するphpのコードを丸暗記したいなと思ってきたのでまとめます。
スタイルシートの取得
ローカルで書いたりするときはcssの相対パスでリンクさせますが、wordpressの場合はphpでcssを呼び出す必要があるようです。
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
urlじゃなくてuri?と思いましたが、urlが絶対パスを示すのに対してuriは相対パスを示すみたいですね。
プラグインの制御とかに必要らしいやつ
<head>
<?php wp_head(); ?>
</head>
headにはこれを入れとかなきゃいけないみたいです。
詳しいことはまだ難しそうなんで今は何も考えず入れてます。
<?php wp_footer(); ?>
</body>
これも必要でbodyの閉じタグの上に置くらしいです。
bodyにクラスを付与
bodyごとにクラスを付与してページごとに区別するためのコード。
ページによって差異を持たせる際に必要なのでこれをbodyに組み込むのがお約束なようです。
<body <?php body_class(); ?>>
<!--色々なコードさん達-->
</body>
ヘッダー、フッダーの取得
wordpressのテーマエディターはヘッダー、メインコンテンツ、フッダーを別々に管理できるのでメインであるindex.phpには直接書かず、phpのコードでヘッダーやフッダーを取得して画面に表示させることができます。
<header>
<?php get_header(); ?> <!--header取得-->
</header>
これで予め作ってあるheader.phpを取得して表示します。
footerも同様に
<footer>
<?php get_footer(); ?> <!--footer取得-->
</footer>
記事に関するコード
記事をクリックしたら該当の記事のリンクに飛んだり、カテゴリをクリックしたらそれに関する記事の一覧が表示されたりとサイトを作る上で最もよく使う機能達。
記事のループ
トップページ等で記事の一覧を表示する場合、記事を表示して次にまた記事があれば表示、無ければ表示の終了を意味するコードです。
<?php if(have_posts()):while(have_posts()):the_post(); ?>
<?php endwhile; endif; ?>
それぞれの記事にクラスを付与
bodyタグにも書きましたが今度は1つ1つの記事を区別するためのコードを書きます。
個別のクラスを付与することで記事ごとの操作が可能になります。
基本的にarticleタグの中に入れ込むことが多いのではないでしょうか。
<article<?php post_class(); ?>>
<!--記事の中身-->
</article>
それぞれの記事にリンクを付与
それぞれの記事に個別のリンクを持たせます。
aタグで囲ってhrefに指定すればクリックで記事単体のページに移動できますね。
<a href="<?php the_permalink(); ?>">
タイトルの表示
<?php the_title(); ?>
投稿日時の取得
<?php echo get_the_date(); ?>
カテゴリの取得
<?php the_category(','); ?>
TOPページでは概要を出して個別ページで全文を表示
デフォルトの状態だとTOPにたくさんの記事の全文が表示されごちゃごちゃしてしまいます。
そこで必要となるのが、TOPページで記事の概要を表示し記事の個別ページに移ったら全文を表示させる条件式です。
<?php if(is_single()): ?><!--個別ページなら-->
<?php the_content(); ?><!--全文表示-->
<?php else: ?><!--それ以外は-->
<?php the_excerpt(); ?><!--概要表示-->
<?php endif; ?>
function.phpに記述するコード
これまではindex.phpにてhtmlの中にphpのコードを組み込んでいましたが、ここからはfunction.phpに記述するコードです。
・function.phpとは
index.php(header.php、footer.php)がサイトの見た目のためのコードであるのに対して、function.phpはサイトの設定とか裏側系のやつ。
アイキャッチ機能の有効化
デフォルトではアイキャッチ機能を使えないのでこれで有効化。
add_theme_support('post-thumbnails');
記事の概要の文字数の設定
デフォルトだと概要の文字数は110字。これをサイトデザインに合わせて変更したいときは、my_length($length)に対して変更したい文字数を返します。ここでは概要を90字に変更。
function my_length($length){
return 90;
}
add_filter('excerpt_mblength','my_length');//概要90字
概要の文字数が上限に達したら...を表示
デフォルトだと概要の文字数に達したら[...]と表示されるのですが、ちょっとかっこわるいので括弧を無くして...だけにしてみます。
function my_more($more){
return '...';
}
add_filter('excerpt_more','my_more');//90字以上は'...'
cssの追加
TOPページと個別ページでcssを分けたいとき等に相対パスを組み込めばcssファイルを別途で使うことができます。
function twpp_enqueue_styles() {
wp_enqueue_style(
'sub-style',
get_template_directory_uri() '/css/article.css'
);
}
Youtubeの動画に自動的にクラスを付与
記事の中にYoutubeの動画を組み込んだとき、画面の大きさを変えたりレスポンシブ対応させたいといったときにifarameタグを検知し自動的にyoutubeというクラスを付け、styleをいじりやすくします。
function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe',
$the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');
@media screen and (max-width:480px) {
/* スマホでは動画を横幅いっぱいに表示 */
.youtube{
width:100%;
}
}
参考文献
WordPressレッスンブック 出版社:ソシム 2014年
THE WORDPRESS PRESS
https://thewppress.com/libraries/enqueue-styles/
Office Kondo
https://takayakondo.com/wordpress-youtube-responsive/
おわりに
現時点で思いついたものを挙げてみました。
なぜこの処理をするのかが理解できてないものがいくつかあり要勉強です。
これから随時更新していければと思います。