この記事ではデイトラWeb制作コースでの学習記録、感想やつまずいた点などをご紹介します。
参考になりましたら幸いです。
尚、今回のセクションは長いためvol.1〜4に分けてご紹介します。
前回の「実践！サイト制作編 vol.1」はこちら。
DAY16【トップページにピックアップ記事を表示する】
DAY16はピックアップ記事を表示する方法を学びました。
一文字の差でうまく適用されず
投稿のデータを取得するには「get_posts」という関数を使うのですが、最初「get_post」としてしまい上手く適用されず苦戦していました。
「get_post」は特定の投稿の情報を取得する関数なので、複数の投稿を取得してくれないんですよね。
一文字の差で動かなくなるのほんと怖い。
「the_title」と「get_the_title」の違い
もう一つ似てる関数で「the_title」と「get_the_title」があります。
関数リファレンスによる説明は以下の通りです。
・the_title：現在の投稿のタイトルを表示、あるいは返します。必ずループの中で使用してください。
・get_the_title：投稿 ID を元に、投稿のタイトルを取得します。
関数リファレンス – WordPress Codex
この他にも、返す結果が異なるようです。
the_title()はechoまで行うのに対して、get_the_title()はタイトルを返すのみという違いがあるようです。
the_title()とget_the_title()の違い
DAY17【ウィジェットを有効化してサイドバーを作る】
DAY17はウィジェットを使ったサイドバーの作り方を学びました。
プロフィール画像はそのままでは反映されない
サイドバーのプロフィール欄ですが、最初画像が表示されず？？だったのですが、WordPressにアップロードする必要がありました。
いつもブログでやっているはずなのに忘れてました…
デイトラの「よくある質問」にて解決しました。
プラグインは便利だけど
今回ウィジェットの中身「人気記事」「新着記事」をプラグインで実装したのですが、あまりに簡単に反映されて驚きました。
でも、jQueryライブラリの時のようにカスタムで壁にぶち当たる日が来そうで怖さもあります…
また、プラグインはたくさん種類があってどれが何のプラグインだかわからなくなりそうだったので、Twitterで仲良くさせていただいているれももさん（@lamoneido）のNotionでのまとめ方を参考にしています！
これでかなりわかりやすくなりました。
最近の学習の様子✍️
— れもも (@lamoneido) May 8, 2022
WordPressはいちいち覚えてられないので、使いたい時にパパッと引き出せるようにまとめています🙆♂️
プラグインは似た名前多いのでアイコンと紐づけらてまとめられるNotionナイスすぎます🥺👌#Web制作 pic.twitter.com/3ESHqLjV22
DAY18,19【自作コード（＋ショートコード）でサイドバーを作る】
DAY18,19はサイドバーを自作で作る方法を学びました。
ウィジェットで作る方法ではクライアントが誤って消してしまったりなどのリスクがあるので、コードで記述し固定しておいた方が良い時もあるそうです。
サブループに慣れてきた
最初はメインループとサブループの違いがよくわかっていませんでしたので、何度か復習に下記サイトで学びました。
様々なコードを見ていくうちにどんな処理を行っているのか分かるようになってきました（多分）。
処理の順序はこんな感じ。
- function.php：カスタムフィールド（記事ごとに設定できる独自関数）を使い、アクセスカウンターを作る
- function.php：カウントアップ関数を作る
- sidebar.php：get_posts関数で該当の記事を取得、foreach文で表示
また、サブループでは「query_posts」は使わない方が良いそうです。
現在は「query_posts」を使うのは非推奨となっており、メインループでは「
【簡単】WordPress プラグインなしで人気記事を表示する方法 【コピペでOK】pre_get_posts」でフックする方法、サブループでは「WP_Query」や「get_posts」を使うことが推奨されているようです。
DAY20【検索結果ページ＋404ページを作る】
DAY20は検索結果ページと404ページの作成方法を学びました。
テンプレートはこれで全てです〜！
$wp_queryで投稿の件数を表示する
$wp_queryについての定義は以下です。
WP_Queryとは、ブログの投稿やページのリクエストを扱うWordpressのクラスです。
WP_Queryにリクエストを定義することで、現在のクエリとは異なる情報を取り出せます。
【WP_Query】よく使う記事データの取得方法まとめ
今回は検索結果の件数を呼び出しなので、「$wp_query -> found posts」で件数を呼び出します。
DAY21,22【WordPressでショートコードを自作する【Gutenberg対応】】
DAY21,22はショートコードの自作方法を学びました。
ショートコードむずい
ショートコードとはWordPressで関数を呼び出すことができる機能です。
プラグインで人気記事を表示させた時にも使いましたが、今回はfunction.phpに自作で関数を書く必要があります。
function.phpでの最初の設定が少し難しかったですね…
どんな流れで作ればいいのかがわかりやすかった記事をシェアします。
ハイライト機能付きコードブロックはこれで決定
WordPressにも標準でコードブロックを挿入できますが、シンタックスハイライトされないので少し見にくかったんです。
下が標準のもの。
<h1>Hallo World!</div>そこで「Highlighting Code Block」というプラグインを使用すると、言語に合わせて自動でシンタックスハイライトしてくれます。
見やすくなりました！
これからはプラグインを利用します。
<h1>Hallo World!</h1>.hoge{
color: red;
font-size: 16px;
}function hoge(){
echo "hoge";
}
DAY23【開発したWordPressサイトを本番環境に移行する】
DAY23は本番環境への移行方法を学びました。
ハッシュ化とは？
今回の演習問題は「データベース上でメールアドレス・ユーザー名・パスワードを変更する」という内容でした。
その中で「パスワードをハッシュ化する」という記載があり、ハッシュ化とは何ぞ？と疑問だったので調べました。
ハッシュ化とは特定の計算手法に基づいて、元のデータを不規則な文字列に置換する処理を指す。
代表的な使用方法としては、パスワードをハッシュ化して保存・管理することが挙げられる。
第三者が不正にパスワードへアクセスしたとしても、ランダムな文字列に変換されていることで、悪用されるのを防げるためだ。
ハッシュ化と暗号化の違いとは？ – サイバーセキュリティ情報局
確かに、データベース上で新しいパスワードを入力しMD5関数を選択すると、別の文字の羅列に変わったのです。
でもログイン時はハッシュ化前の新しいパスワードで入れました。
正直この辺りのITの基礎が抜け落ちてる感じが否めません…
ITの基本を別で学んだ方が良いのかなと考えています。
まとめ
ついにWordPressオリジナルテーマの移行までたどり着きました！！
でもまだ一人で全て行える気がしません…
サーバーについてなど、ITの基礎が抜け落ちているなとも思うので、Web制作だけでなくIT全体の基礎知識を増やしたいです。
次は「実践！サイト制作編 vol.3」をレポートします！
コメント