SimpleJournal – アーカイブページの作り込み

本日はカテゴリーごとの投稿一覧やタグごとの投稿一覧を表示するためのページテンプレート archive.php を作りこんでいきたいと思います。

01. index.php をコピーして archive.php を作成

まずはじめに、index.php をコピーして、archive.php という名前のファイルを作成します。

archive

 

02. archive.php を編集

上記の手順で作成した archive.php に、アーカイブページのタイトルを表示するコードを追記します(9〜15行目)。

 

利用したのは以下のテンプレートタグ。

the_archive_title

クエリの内容に基づいてアーカイブのタイトルを表示します。
ターム(カテゴリー、タグ、カスタムタクソノミー)、日付、投稿タイプ、投稿フォーマット、作成者などのアーカイブページが対象です。

 

Webブラウザでカテゴリーごとの投稿一覧を表示すると、以下のようになります。

ArchivePage01

「カテゴリー:」という文字を勝手につけてくれるのが微妙ではあります・・・・

 

03. the_archive_title テンプレートタグをカスタマイズ

テンプレートタグ「the_archive_title」が出力するタイトルがいまいちなので、今回のテーマ向けにカスタマイズしてみます。

 

functions.php に以下のコードを追記。
※デザイン上不要な日本語化も無効にしています。

 

Webブラウザで先ほどのページを見ると、以下のようになります。

CategoryArchive

 

例えばタグのアーカイブだと、

TagArchive

月別のアーカイブだと、

MonthlyArchive

・・・といった感じに、動的にタイトルが変化してくれます。

ソースコードをキレイに表示する

前回まででIllustratorによる大まかなデザインの作り込みができましたので、いよいよHTMLでデザインを実装していく段階に入ります。

今後はHTMLやCSS、JavaScriptやPHPのコードを紹介する機会も増えると思うので、これらのソースコードを記事上で綺麗に表示するためのWordPressプラグインをインストールしておこうと思います。

Crayon Syntax Highlighter をインストール

今回利用するのは「Crayon Syntax Highlighter」というプラグインです。 こちらの記事を参考にこのプラグインをインストール&有効化します。

Crayon Syntax Highlighter の設定

プラグインをインストールできたら、WordPressのダッシュボードにアクセスし、プラグインの設定を行います。

左サイドバーの「設定」→「Crayon」メニューをクリックします。

menu of Crayon

以下のような設定画面が表示されますので、必要に応じて設定を変更します(初期状態のままでも問題なく利用できます)。

default settings of Crayon

今回は以下のように変更してみました。

  • プラグインのテーマを「Classic」から「Sublime Text」に
  • フォントを「Monaco」から「Liberation Mono」に
  • サイズを 高さ400px、幅100%に(レスポンシブ対応)

設定を変更した後、画面下の「変更を保存」ボタンをクリックしたら完了です。

save settings of Crayon

プラグインを使って記事にソースコードを埋め込む

早速 Crayon を使って記事にソースコードを埋め込んでみます。

投稿の編集画面を表示し、本文のHTMLエディタの表示を「ビジュアル」から「テキスト」に変更します。

ソースコードを挿入したい箇所にカーソルを移動し、HTMLエディタの上部メニューの「crayon」ボタンをクリックします。

insert source code to post

以下のようなポップアップが表示されますので、必要な箇所を入力していきます(先ほど設定画面で設定した内容が初期値として入力された状態となっています)。

insert source code

 

最後に「挿入」をクリックすると、投稿の本文にソースコードが挿入されます(以下)。

inserted source code

 

これをプレビューでみてみるとこんな感じに。

preview source code

なかなかカッコよくソースコードが表示されます。

今後テーマ作成の過程でソースコードを書く必要がある場合は、このプラグインを使って内容を紹介していこうと思います。

スタイルシートをカスタマイズしてサイトのフォントを変更する

前回までで、WordPress(および Twenty Fifteen)のカスタマイズ機能を使ってサイトの外観を変更してみました。

今回は、カスタマイズ機能では行うことのできない「サイト全体に適用されているフォントの変更」をしてみたいと思います。

 

Custom CSS/JS プラグインをインストール

サイトのフォントを変更するにはCSSファイル(Cascading Style Sheets、カスケーディング・スタイル・シート)というものをいじる必要があります。

現在サイトに適用しているテーマ(Twenty Fifteen)のCSSファイルの所在は以下。

(WordPressがインストールされているディレクトリ)/wp-content/themes/twentyfifteen/style.css

これをいじるとなると、

  • WordPressがインストールされているサーバー上の Twenty Fifteen テーマフォルダ内にある style.css を直接編集
  • ダッシュボードの左メニューからテーマの編集画面を開き、 style.css を編集&保存

のどちらかの方法を行う必要があります。

ただ今回はできるだけ簡単にカスタマイズしたいので、上記の方法ではなく「Custom CSS/JS」というプラグインを使ってサイトの管理画面からスタイルシートの記述を変更してみようと思います。

プラグインのインストールと有効化の方法については、以前の記事を参照のこと。

 

プラグインを使ってスタイルシートの記述を追加する

プラグインのインストールができたら早速、サイトのスタイルシートをいじってみたいと思います。

WordPressのダッシュボードにアクセスし、左サイドバーの「外観」→「Custom CSS/JS」メニューをクリックします。

menu of Custom CSS/JS

 

以下のような画面が表示されますので、スタイルシートの記述を追記してみます。

※ ちなみに赤枠の下のJavaScriptには、Google Analyticsのトレッキングコードを追加しています。

Custom CSS/JS update view

 

今回の場合の記述内容は以下。

Custom CSS

 

HTMLのbodyタグ以下の要素に、

【文字の高さ】
1.7em

【フォント】
「ヒラギノ角ゴシック」「メイリオ」「Osaka」「MS Pゴシック」「sans-sefif」(優先度の高い順)

を適用する記述となっています。

※ なお「.border-image」の記述では、画像に適用する枠線のスタイルを定義しています。

 

上記のように入力したら、画面の一番下の「Save All Changes」ボタンをクリックします。

以下のようなメッセージが表示されたら、スタイルの適用は完了です。

custom css updated

 

 

サイトを確認してみると以下のようになります。

ofter custom css

 

ちなみに適用前のサイトのは以下。

before custom css

 

サイトのフォントが明朝体からゴシック体に変更されているのがわかります。

その気になればもっと大幅にサイトのスタイルを変更することも可能なのですが、今回はこのくらいにとどめておき、次回からはいよいよ自作のWordPressテーマの作成に入りたいと思います。