前回、TOPページの土台を作りました。今回はその仕上げとして、「自分の基地」らしくなるように、不要な部分を消し、記事の表示を自動にしました。
きっかけ：TOPだけまだ「ブログ」のままだった
前回の時点では、TOPの中身は紺色のデザインになっていましたが、まわりにCocoon標準の部品が残っていました。
- 一番上の白い、サイト名のヘッダー
- グレーのメニュー帯（学習ロードマップ）
- ページ下部の投稿者名（pacho22）のグレーの帯
- 紺色の背景に同化して読みにくい、投稿日
やったこと
1. 不要な部分を、CSSで消した
「外観 → カスタマイズ → 追加CSS」に、TOPページだけを対象にしたCSSを足しました。
.home #header { display: none; } /* サイト名のヘッダー */
.home #navi { display: none; } /* メニュー帯 */
.home .date-tags { display: none; } /* 投稿日 */
.home .article-footer,
.home .entry-footer { display: none; } /* 投稿者情報の帯 */
.home を付けると、TOPページ（ホーム）だけに効くので、他のページの見た目は変わりません。
2. 「最近の足跡」を自動表示にした
最初は、記事のタイトルとURLをHTMLに直接書いていたので、新しい記事を書いても、TOPは変わりませんでした。そこで、最新の記事を自動で並べる仕組みに変えました。
- 子テーマが入っていなかったので、テーマのファイルは触らず、Code Snippets というプラグインを使った
- 「ショートコード」という、短い呼び出し文字（
[pacho_cent_posts count="3"]）を作った - TOPのHTMLの、手書きしていた記事3件の部分を、この1行に置き換えた
これで、記事を公開すると、TOPの最新3件が自動で更新されます。
コードスニペット？PHPなど知らないワードが沢山出てきた。
コードスニペットとは、WordPressに小さな機能を足すための、短いコードの断片のこと。Code Snippetsというプラグインを使うと、テーマのファイルを触らずに、安全に追加できる。
学んだこと
.homeのように、対象を絞ったCSSを書くと、他のページに影響を出さずに、見た目を変えられる- コードを足したいとき、テーマのファイルを直接触るより、プラグインを使うほうが安全（間違えても、そのスニペットだけを止められる）
- 手で書いていた部分を、自動にする方法がある（ショートコード）
- AIに伝えれば何でもしてくれる。とにかくAIの指示通りに作業をするだけ。
- 何をしているのかあまりわかっていない。前回勉強した知識で何となくわかるけど、自分の力になっているような気はしない。
次回
TOPができたので、次は、他のページの色やヘッダー画像も、同じ世界観にそろえていきます。TOPの「今日の一手」も、実際の内容に差し替える予定です。
コメント