一通り整えられたと思うので自分用備忘録がてら参考にしたサイトなどまとめました。ざっくりざっくり。
WordPressの導入とか
サイトをWordPress化したの自体は1年半くらい前なんですが、当時は上記の記事を参考にさせて頂きました。基本的な設定とかページの作り方とかが流れにそって網羅されているので分かりやすいです。やりながら細かいところは随時検索してってWordPressの扱いに慣れていきました。
使用テーマ「Cocoon」
シンプルでレスポンシブ、動作が軽くて管理画面でのカスタマイズ項目がたくさんあるので自由が効きやすいテーマです。あと利用している方がたくさんいるので検索で目当てのカスタマイズ方法が見つかりやすいのも良いです。
基本的なカスタマイズ
テーマをCocoonに変更するにあたって行ったカスタマイズなど。
サムネイルを再生成してサイズをそろえる
他のテーマから移行した時とかインデックスカードのレイアウトいじった時とかにサムネイルの表示がバラバラになった場合は上記で紹介されているRegenerate Thumbnailsプラグインを使うと再生成してサイズをそろえてくれます。
サイズの合わないサムネイルの高さを他と揃える
アイキャッチに指定する画像のサイズがサムネイルで出力されるサイズより小さいとサイズがちょっと乱れるので、以下のフォーラムの下のほうで紹介されているスタイルシート参考にサムネイルの表示の高さをそろえました。
ただセレクタを「.card-thumb」だけでそのままやると記事前後リンクの画像まで荒ぶるのでもうちょと親要素から指定したほうが良さげ。
サムネイルの出力サイズを変える
出力されるサムネイルサイズがデフォルトだと320×180で、カラム幅が広い時とかにサイズ足りなくてぼやける感じになるので上記を参考にfunctions.phpに書き足して出力サイズが大きくなるよう設定しました。418×220にしてます。設定し直したらサムネイルの再生成を忘れずに。
フッターをモバイル幅でも表示
最初、スマホからみるとフッターメニューが消えるので何故～？と思っていたんですが、Cocoonの仕様でモバイル幅の時は非表示になるみたいです。スタイルシートで表示設定にしました。もしくはウィジェット管理画面の下のほうに「フッター（モバイル用）」という項目があるのでそっちに表示させたいウィジェット追加しても可。
1カラムにして記事・固定ページの本文だけ幅を狭くする
サイトを1カラムにするのはWordPressの管理画面の「Cocoon設定」→「全体」→「サイドバーの表示状態」で「すべてのページで非表示」でできます。そのままだと本文幅が広いので上記のフォーラムを参考に幅を調整しました。
1カラムの時にブログのサイドメニュー（カテゴリー一覧、タグ一覧など）を下のほうに表示する
ウィジェットの管理画面で「コンテンツ下部」エリアに表示させたいウィジェットを追加→固定ページでは非表示（ブログページでのみ表示）で対応しています。
細部のデザイン変更
Cocoonの細部のデザイン変更は検索すると紹介されている記事が本当にたくさん出てくるのでいろいろ参考にさせて頂きました。
- 【cocoon】初心者向け見出しカスタマイズ！コピペだけで簡単にできるよ | 吉田あみ公式ブログ
- 【Cocoon】コピペで目次をSANGO風にカスタマイズ！ | Y&K Studio – 二人三脚ブログ –
- 【Cocoon】ヘッダーモバイルボタン（スマホメニュー）をカスタマイズ
Cocoon独自のショートコード機能で作品一覧を作る
1P~数ページの漫画はブログにアップしてその記事へのリンクで良いかな、ということで「カテゴリーを絞り込んだ新着記事一覧」という形で作品一覧にしています。これはCocoon独自のショートコード機能を利用しました。
新着記事一覧ショートコードでカテゴリーを絞り込んで表示
オプションで「大きなサムネイル」「タイトルを太字」「表示するカテゴリーを指定」などを設定して呼び出しています。
サムネイルを横並びに
そのままだと縦並び表示なので以下のフォーラムを参考に横並びにしました。display:flex;便利～。
レスポンシブ対応
レスポンシブ対応は以下を参考に。タブレット幅は2カラム、モバイル幅は1カラムにしています。
固定ページも絞り込んで表示できるようカテゴリーやタグを設定する
長編漫画は1話づつ固定ページを作っています。Cocoonの新着記事ショートコードは固定ページも呼び出せるんですが、デフォルトだとカテゴリー等で絞り込めないので以下を参考にfunctions.phpに書き足して固定ページにカテゴリーを設定できるようにしました。
ブログのアーカイブには固定ページ表示させたくなかったので「// カテゴリーアーカイブに固定ページを含める」以下は使いませんでした。ただカテゴリー一覧メニューにはこれ用に作ったカテゴリーも表示されてしまうので、要素調べてクラス名指定してスタイルシートで非表示にしました。
キャプション部分は固定ページ編集画面の設定メニュー内「抜粋」に入力した内容が表示されます。
記事の投稿日を表示
以下のフォーラムの下の方で出てくるのですが、デフォルトだと記事の投稿日が非表示になっているのでスタイルシートで表示させています。
ショートコードの記事一覧でもカテゴリーラベルを表示（2021年1月20日追記）
デフォルトだとショートコードの記事一覧はカテゴリーラベルが出力されないのですが、公式の上記の記事2項目目の「元々非表示のカテゴリーラベルを表示させる」でfunctions.phpに追記することで表示できるようになるコードが紹介されています。
自作ショートコードでイラスト一覧を作る
ショートコードをいじっているうちに「記事のアイキャッチ画像を一覧で呼び出せればそれをそのままイラスト一覧にできるのでは？」と思い立ってイラスト一覧も作ってみました。こっちはCocoon独自のじゃなくて直接functions.phpへ書き足してカスタマイズするタイプのショートコードを応用して設定しました。
新着記事のアイキャッチ画像を並べる
私は記事にアップするイラストをそのまま記事のアイキャッチ画像にも設定てしいるので
<ul class="クラス名">
<li><a href="アイキャッチ画像原寸サイズのURL" title="記事タイトル（日付）"><img src="アイキャッチ画像サムネイルサイズのURL" alt="記事タイトル（日付）" /></a></li>
・
・
・
</ul>イメージ的には↑こういう感じの出力にできればいけると思い……
- WordPressでショートコードを使って新着記事一覧を表示してみよう！ | みんな栄養に頼りすぎてる
- WordPressでショートコードを使ってカテゴリやタグの新着記事一覧を表示させる方法 | みんな栄養に頼りすぎてる
↑こちらの出力内容がシンプルめ且つカテゴリ・タグ指定などもできるものだったので参考にして、「get_permalink()」の部分を「get_the_post_thumbnail_url()」に書き換えたりしていって何とかなりました。見よう見まねすぎて責任持てないのでコードは公開しませんが、そんなに難しくはなかったと思います。サムネイルの表示サイズ等はスタイルシート側で指定しています。
画像ポップアップJavascriptプラグイン「baguetteBox」を設定
このままだと画像直リンクだけなので、クリックした時にポップアップ表示＆同じブロック内の画像を前後リンク（モバイル、タブレットの時はスワイプ）できるようにbaguetteBoxというJavascriptプラグインを使用しています。
↑こちらを参考に導入しました。
baguetteBox、Cocoonにデフォルトで入っていて「Cocoon設定」→「画像」メニューからオンにできるんですが、そっちだとセレクタ指定がコンテンツ全体になっているのでブロックごとに前後リンクを区切れなかったんですよね。Cocoon上のコードの書き換えは私には難しかったのでCocoonの設定はオフにして自前で導入してセレクタ指定しました。
最後に
年明けてからまじでサイトカスタマイズにかかりっきりだったんですが、とりあえずブログにイラストアップしたら自動で一覧に追加できるようにできたので大変満足です。またえっちらおっちら更新がんばります～。
