こんにちは！
デイトラWeb制作コース受講生のハッサク(@hassaku_888)です！
現在受講しているデイトラ・Web制作コースの学習記録とつまづいた部分をまとめていきます。
前回「DAY18.19の学習記録」も書いているので、気になる方は是非ご覧ください（＾＾）
DAY20 【検索結果ページ＋404ページを作る】
カスタマイズ編：検索結果から固定ページを除外する
WordPressの検索結果は、デフォルトだと、投稿と固定ページの両方が表示されます。
実案件でも固定ページは検索対象から除外することが多いようで、以下のコードをfunction.phpに追加するレッスンでした。
/**
* 検索結果から固定ページを除外する
* @param string $search SQLのWHERE句の検索条件文
* @param object $wp_query WP_Queryのオブジェクト
* @return string $search 条件追加後の検索条件文
*/
function my_posts_search( $search, $wp_query ){
//検索結果ページ・メインクエリ・管理画面以外の3つの条件が揃った場合
if ( $wp_query->is_search() && $wp_query->is_main_query() && !is_admin() ){
// 検索結果を投稿タイプに絞る
$search .= " AND post_type = 'post' ";
return $search;
}
return $search;
}
add_filter('posts_search','my_posts_search', 10, 2);!is_admin()
正直「管理画面をわざわざ除外する必要があるの？」という感じですが、メンターさんの回答によると、「念の為の指定かとは思いますがこのフィルターフックをカスタマイズする際の決まり文句みたいなものだと思います。」とのことでした。
定型文ということで、覚えておこう。
$search .= ” AND post_type = ‘post’ “;
「.= 」 → 代入演算子 というみたいです。
<?php
PHP 代入演算子
$b = “Hello “;
$b .= “There!”; // $bを”Hello There!”にセットします。$b = $b . “There!”;と同じです。
?>
つまり、「$search ” AND post_type = ‘post’ “; 」となるので、「検索キーワード かつ 投稿タイプ ‘ポスト’」という指定をしている。→検索結果を投稿タイプ’post’に絞っているのだと思います。
$searchには、SQLのWHERE句の検索条件が入ります。
つまり $search ＝「WHERE 検索キーワード」となります。
▼参考になったサイト
フィルターフック 「posts_search」
検索結果ページに適用されるフィルターですよ、とここで指定しています。
これが記述されることで、検索結果ページを開く時に、my_posts_search関数が動きます（検索結果を投稿タイプに絞っています）。
DAY 21~22 【WordPressでショートコードを自作する(Gutenberg対応)】
functions.phpにショートコード用のPHPを記述する
自作でショートコードを作り、そのショートコードをWordPressに認識してもらうための設定を行いました。
設定するために、function.phpに設定用の記述を追加するのですが、このコードの理解に時間がかかりました。
function my_shortcode( $atts, $content = '' ) {
return '<div class="entry-btn"><a class="btn" href="' . $atts['link'] . '">' . $content . '</a></div><!-- /entry-btn -->';
}
add_shortcode( 'btn', 'my_shortcode' );自作のショートコードを作る時にadd_shortcodeを使うのですが、以下の設定をしています。
- 第１引数：ショートコードの名前をつけている（ここではbtnという名前をつけている）
- 第２引数：ショートコード[btn]が呼び出された時に関数「my_shortcode」を実行する
このように、引数として渡される関数はコールバック関数というみたいです（豆知識）
引数の使い方を理解すると、スムーズに理解することができるようになったので、参考になったサイトを貼っておきます。
上記の設定を行った上で、投稿ページに以下ショートコードを記述すると、ボタンが無事表示されました！
▼記述したショートコード
[btn link="https://www.yahoo.co.jp/"]お問い合わせはこちら[/btn]
ちなみに以下の記述だと、ボタンはちゃんと表示されません。
[btn]お問い合わせはこちら[/btn]以下のように、link=””を書くことで、連想配列を設定しています（link=>https://www.yahoo.co.jp/）
[btn link="https://www.yahoo.co.jp/"]お問い合わせはこちら[/btn]この連想配列が、最初のfunction.phpに書いた「$atts[‘link’]」に入ってきます。
ですので、ショートコードの中に「link=””」を書かないと「$atts[‘link’]」の中身が空っぽになるので、ボタンがちゃんと表示されないんですね。
function my_shortcode( $atts, $content = '' ) {
return '<div class="entry-btn"><a class="btn" href="' . $atts['link'] . '">' . $content . '</a></div><!-- /entry-btn -->';
}
add_shortcode( 'btn', 'my_shortcode' );例えばlinkではなくclassを設定したかった場合、
ショートコード内は「link=””」→「class=””」、function.phpは「$atts[‘link’]」→「$atts[‘class’]」と書き換えれば良さそうですね！
理解するまで、分からなさすぎてとても勉強意欲低下していたのですが、分かった瞬間めちゃくちゃ楽しくなりました笑
自作したショートコードは、メニュー内にある「再利用ブロックに追加」をしておくと、次回から＋ボタンをおすだけで追加できるようになります。めちゃ便利！！
▼その他参考にしたサイト
演習課題２：コードをハイライト表示できるようにする【上級者向け】
highlight.jsの読み込み方法に悩みました。最終的には以下のように記述しました。
▼cssの読み込み
wp_enqueue_style('highlight', get_template_directory_uri() . '/css/tomorrow-night-bright.min.css', array(), filemtime(get_theme_file_path('css/tomorrow-night-bright.min.css')), 'all');
▼jsの読み込み
wp_enqueue_script('highlight', get_template_directory_uri() . '/js/highlight.min.js', array('jquery'), filemtime(get_theme_file_path('js/highlight.min.js')), true);
第４引数の記述方法がいろいろあったため、メンターさんに質問し以下結論にたどり着きました。
推奨としては以下の通りである。
▼開発中
→filemtime(get_theme_file_path('js/highlight.min.js'))
※ブラウザを読み込むたびにファイルのバージョンが変わるので、サイト修正がスムーズ★注釈
▼公開後
→上の記述は控える（第４引数に「false」を書く or バージョンを書く(例：'5.8.2') or 第４引数を削除 など）
※ページの読み込みスピードに影響が出るため
★注釈：そもそも、filemtime(get_theme_file_path('js/highlight.min.js'))の記述をなぜしているのか？
この記述によって、ブラウザを読み込むたびにファイルのバージョンが変わります。つまり、常に最新のファイルを読み込める=キャッシュの影響を受けなくなるということです。
クライアント側でサイトを確認いただく際、「修正されてないんだけど！」というよくあるトラブルを防ぐことができるため、この第4引数は開発段階では動的に記述しておくことをオススメします。
そもそもwp_enqueue_style と wp_enqueue_scriptの理解が不十分だったので、そこも復習しました。（以下サイトがとても参考になりました）
▼参考になったサイト
DAY23 【開発したWordPressサイトを本番環境に移行する】
WordPressの終わりが見えてきました。いよいよサーバーにアップします！
WordPressの正規の移行手順には手こずりましたが、プラグインを使えばわずか5分で移行が完了したのには驚きました..！！
演習課題では、WordPressのID・パスワードを忘れた場合に、phpMyAdminから変更する手順を学びました。やり方は２つ。
1. 管理画面上で変更 「wp_users」を開く ＞ 対象ユーザー名が登録されたレコードの「編集」をクリック ＞ 編集画面から変更 ２. SQLを書いて変更 「wp_users」を開く ＞ 上部のメニューから「SQL」をクリック ＞S QLを書いて変更
1はとても簡単。今後もしやる機会が来たら、こちらを使うと思います。
注意点としては、パスワードを変更する際、関数のプルダウンを「MD5」に設定する必要があります。
MD5にすると、パスワードがハッシュ化され、管理画面上には暗号のようにして表示されます。
２の場合は、以下のSQLを書いたら変更ができました。こちらも簡単でした。
UPDATE 対象DB.DB接頭語users
SET user_pass = MD5('新しいパスワード')
WHERE user_login = 'パスを変更したいユーザー名';▼参考にしたサイト
まとめ
今回の講義内容も非常に学びが多かったです。
検索結果ページ実装部分では、考えても調べても分からない部分が多かったので、メンターさんに質問して乗り切りました。（メンターさんいつも有難うございます！）
ショートコードはそれ自体は簡単だったけれど、仕組みを理解するのに時間がかかりました。
特に徹底的に調べたのは「filemtime」です。（メンターさんにもこってり質問しました）
この関数を使うと、ファイルを更新する度にパラメータの数値が変わるため、新しいURLと認識される→都度サーバーにデータをとりにいく→結果、キャッシュの影響を受けません。
開発中に変更した部分の確認がスムーズにできる便利な関数だと感じました。この関数はDAY30の講義にも出てきたので、デイトラ的にも、非常におすすめなキャッシュ対策なんだろうなと思いました。
