【デイトラ】上級-実践！サイト制作編【DAY18.19】

こんにちは！

デイトラWeb制作コース受講生のハッサク(@hassaku_888)です！

現在受講しているデイトラ・Web制作コースの学習記録とつまづいた部分をまとめていきます。

前回「DAY13〜17の学習記録」も書いているので、気になる方は是非ご覧ください（＾＾）

ハッサクこんにちは！デイトラWeb制作コース受講生のハッサク(@hassaku_888)です！現在受講しているデイトラ・Web制作コースの学習記録とつまづいた部分をまとめていきます。DAY13,14 【single.phpを編集して投稿ペー...

DAY18,19 【自作コード（＋ショートコード）でサイドバーを作る】
まとめ：難しいけどなんとか続けてます
1. 関連

DAY18,19 【自作コード（＋ショートコード）でサイドバーを作る】

カスタムフィールドとは？

投稿や固定ページなどで「タイトル」や「本文」などの項目の他に、カスタムフィールドを使用することで、任意に項目を追加することが出来ます。
【WordPress】カスタムフィールドの値・キーを取得して表示する方法と、値を更新する方法

サイトの内の必要な箇所だけをいじることができる、領域(フィールド)を追加するイメージでした。

本来サイト内のテキストを変えたい場合、HTML/PHPをさわる必要がありますが、カスタムフィールを使えば「タイトル・本文部分だけ」の投稿画面を作ることができます。

※参考にした動画はこちら（カスタムフィールドの管理画面もみれます）

ただし、WordPressのデフォルト機能だと画像は変えられないので、画像の変更も必要な場合はプラグインを使用します。（こちらの説明も上記の動画で詳しく説明しています）

「人気記事トップ5を表示する」のコードが難しい

毎回新しい関数・記述に出会うたびに、眠気と葛藤しています😂
今回も例外ではなく😂分からなかった部分を抜粋して解説いれていきます。

functions.php

/**
* カスタムフィールドを使ってアクセス数を取得する（特定記事のアクセス数確認用）
*
* @param integer $id 投稿id.
* @return void
*/
//アクセス数を取得
function get_post_views( $id = 0 ){
global $post;
//引数が渡されなければ投稿IDを見るように設定
if ( 0 === $id ) {
$id = $post->ID;
}
$count_key = 'view_counter';
$count = get_post_meta($id, $count_key, true);

if($count === ''){
delete_post_meta($id, $count_key);
add_post_meta($id, $count_key, '0');
}
return $count;
}

/**
* アクセスカウンター
*
* @return void
*/
function set_post_views() {
global $post;
$count = 0;
$count_key = 'view_counter';

if ( ! is_single() ) {
  return;
}

if($post){
$id = $post->ID;
$count = get_post_meta($id, $count_key, true);
}

if($count === ''){
delete_post_meta($id, $count_key);
add_post_meta($id, $count_key, '1');
}elseif( $count > 0 ){
if(!is_user_logged_in()){ //管理者（自分）の閲覧を除外
$count++;
update_post_meta($id, $count_key, $count);
}
}
//$countが0のままの場合（404や該当記事の検索結果が0件の場合）は何もしない。
}
add_action( 'template_redirect', 'set_post_views', 10 );

$count_key = ‘view_counter’;

変数$count_keyに、カスタムフィールドキーの名前（view_counter）を指定しています。
” が見慣れませんが、カスタムフィールドキーの名前を指定するときに使います。

get_post_meta()関数

▼使い方
<?php $meta_values = get_post_meta($post_id, $key, $single); ?>
Codex

指定したカスタムフィールドの値を取得します。
Codexの戻り値をみると、値にはいろいろな形があると感じました。

▼戻り値
$id だけが設定されている場合、その投稿に関するすべてのカスタムフィールドの値を配列として返します。
・$single が false に設定されているか、何も設定しなかった場合、関数は指定したキーを持つすべての値からなる配列を返します。
・$single が true に設定された場合、関数は指定されたキーを持つ最初の値を返します（配列ではありません）。
・もしも関数が返す値がなかった場合、空の配列を返します。$single が true に設定されていた場合、空の文字列を返します。
Codex

戻り値は「配列」「値」「空の配列 or 空の文字列」とさまざま。
今回だと第3引数にtrueと記述されているので、黒丸→・2つ目の記述から戻り値は値になりそう？

余談１：
ループ内で投稿の ID を取得するには、「$post_id」部分を「 get_the_ID()」と書くようです。

<?php
// カスタムフィールドの値を取得
$value = get_post_meta( get_the_ID(), 'sample_field', true );
// カスタムフィールドの値がある場合
if( $value ){ 
    echo $value;
}
?>
参考：【WordPress】カスタムフィールドの値・キーを取得して表示する方法と、値を更新する方法

余談２：
「get_post_meta()関数」のように「get_○○」で始まる関数は「値を取得する」と大抵Codexに記述されています。似たような表現で「the_title」のように「the_○○」で始まる関数は「値を表示する」とCodexに大抵記述されています。私はこの違いがよく分かっていませんでした。

特に「get_○○」の値を取得するって、値を表示すると何が違うの？

結論、「値を取得する」とは、プログラムの中で使えるデータとしてひっぱってくるという意味のよう。表示させるというより、データとして参照するという印象が強かったです。

そして取得してきたものをHTMLとして表示するには、echoが必要になる。もし「取得してきた情報を表示させたい場合」＝「echo get_post_meta()」のように、前にechoをつける必要がある。

▼参考にした動画（15:05〜）
https://www.youtube.com/watch?v=roNR8Df_68w

delete_post_meta()関数

投稿から指定したキー（もしくはキーと値）を持つカスタムフィールドをすべて削除します。
Codex

▼使い方
<?php delete_post_meta( $post_id, $meta_key, $meta_value ); ?>

▼戻り値
(真偽値) 失敗なら False、成功なら True を返す。
Codex

get_post_meta関数の戻り値は値だったけど、delete_post_meta関数はTrue/Flaseで全然違う！似ている表現だからビックリでした。

add_post_meta()関数

指定した投稿や固定ページへカスタムフィールド（「メタデータ」とも呼ばれます）を追加します。どんな投稿タイプの投稿でも構いません。ひとつのカスタムフィールドは、実際にはキーと値の組です。
Codex

アクションフック「template_redirect」

WordPressをある程度カスタマイズできるようになってくると、ページが表示される最初のタイミングで何かを実行したい！という場面が出てきます。
そんな時に使えるアクションフックがtemplate_redirectです。
【WordPress】便利なアクションフック「template_redirect」

例えば、特定のページをリダイレクトさせたり404にしたい場合、表示する最初のタイミングで条件分岐して処理を書くことができるみたい！なるほど〜。リダイレクトの動きって、こういうアクションフックが関わってたんだなぁ。

▼参考になったサイト

【WordPress】便利なアクションフック「template_redirect」｜notes by SHARESL

WordPressのアクションフック「template_redirect」についてのメモです。WordPressのテンプレートを表示する最初のタイミングで実行されるフックです。簡単な使い方の例を載せて紹介しています。

is_single()

この条件分岐タグは、添付ファイルや固定ページを除く個別の投稿を表示しているかどうかをチェックします。もし $post パラメータが指定されていれば、指定された投稿が表示中であることを追加でチェックします。
Codex

課題のコードには以下のように記述されていました。
最初に！がつくので、「任意の個別投稿ページが表示されていなかったら」という意味合いになります。

if ( ! is_single() ) {
  return;
}

return
関数内で呼び出されると、return文は即座にその関数の実行を停止し、引数を関数の値として返します。 returnはまた、eval()文やスクリプト自体の実行を終了させることが出来ます。
PHP

投稿ページ以外( ! is_single())ではアクセスをカウントしないので、return;で呼び出し元に戻しています。

投稿ページだけのアクセス数を計測するために、投稿ページ以外の計測が始まったら最初に停止しておく。というイメージでいいのかな？（曖昧な理解）

日付アーカイブを表示する

サイドバーに日付を表示する方法はとても簡単。以下コードを貼り付けるだけでOKでした。

wp_get_archives( )；

▼利用イメージ
<ul>
<?php
$args = array(
'type' => 'monthly',
'limit' => '',
'format' => 'html',
'before' => '',
'after' => '',
'show_post_count' => false,
'echo' => 1,
'order' => 'DESC',
'post_type' => 'post'
);
wp_get_archives( $args );
?>
</ul>

argsは全て初期値なので、省いて以下のように書いてもOKです。

<?php
wp_get_archives(); 
?>

※初期値の詳細はCodexを参照。

HTML の <li>（番号なし箇条書き）リストでアーカイブを表示するため、<ul>で挟んであげた方が良さそうでした。

<ul>
<?php
wp_get_archives( $args );
?>
</ul>

↓<ul>で挟まないとこんな感じになります。

改めて「esc_url」って何？

<div class="entry-item-img">
<?php
if (has_post_thumbnail() ) {
the_post_thumbnail('large');
} else {
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">'; 
}
?>
</div><!-- /entry-item-img -->

よくURLを取得するとき、前に「esc_url」がつくことが多いんですよね。

URLをエスケープするesc_url

esc_url関数はURLをエスケープした文字を返します。エスケープとは、セキュリティ的に問題のない文字に加工する処理だと思ってください。そのまま出力されると問題のある文字を安全な文字に加工する作業です。
これは「サニタイズ」（無害化）とよばれる工程で、サイトのセキュリティ対策として重要な工程です。PHPに慣れていないと思い付かない作業かもしれませんが、実際のテーマから少しずつ実践的なヒントを学ぶようにしましょう。
<?php echo esc_url( home_url( ‘/’ ) ); ?>の解釈

上記を読んでも何となく分かったような理解力。
とりあえず「HTMLに使うリンクのURL」「画像パス※」「home_url()」の前につくことが多いのかな？と一旦理解しました。
※esc_url(get_template_directory_uri()) といった使用イメージ。