好きなことを好きなように綴っているブログ

ささらメモ

同人サイトを構築する

WordPress(AFFINGER5)で同人サイトを構築する(3)【イラスト一覧編】

投稿日:2018年12月5日 更新日:

さて、Wordpressで同人サイトを構築するシリーズ第3回、今回から早速カスタマイズに入って行きたいと思います。

こんにちは、ささお(sasao_blog)です。

前回記事
WordPressで同人サイトを構築する(2)【構想編その2】

私事ですが、このブログのサーバー移転に伴って開店休業中な自分の同人サイトも移転の必要が出てきました。こんにちは、ささお(@sasao_blog)です。 さて、「こんなサイトを作りたいな~」とふんわり構 ...

続きを見る

WordPressで、といいつつAFFINGERのカスタマイズ記録になっているので今回からタイトルを少し変更しています。

なお、基本中の基本なので詳細は省きますが、テーマはAFFINGERの子テーマをインストールして有効化するようにしてください。

なお、私はPHPとかさっぱりわからない素人で、殆ど参考サイトのコードをコピペしてカスタマイズしています。

この記事を参考にしてカスタマイズする場合は大変申し訳ございませんが自己責任でお願いしますm(_ _)m

STINGER PLUS 2の場合

無料テンプレートの「STINGER PLUS 2」の場合についても併記しているので参考にしてみてください。

カテゴリーの構成について

さて、ギャラリーの構成的には上記の2つの方法が考えられるかなと思うのですが、サンプルサイトのカテゴリー分けは「その1」を採用しています。

ここはもう、好みの問題かなと。

イラストと小説でデザインを表示分けするのであれば、方法その2の第2階層のカテゴリーを「イラスト・漫画」と「小説」で分ける方がテンプレートファイルが少なくて済むので、特にこだわりが無ければ方法その2の方がオススメだと思います。

サンプルサイトではより面倒くさい方を採用しています(笑)

イラスト一覧画面の完成形

サンプルサイトを見ていただければ分かるのですが、前回の記事でイラスト一覧は「サムネイルの画像がズラーッと並んでいる画面」がいいなと思っていましたが、最終的には以下の画像のような形で落ち着きました

カード型で2列表示です。

サムネイルの他に、カテゴリーとタグ、説明文があれば表示するようになっています。

AFFINGER機能の「サムネイル画像をポラロイド風にする」は動作しますが、「丸くする」は動作しません。

大きいサイズも動作しましたが、少しCSSの調整が必要になってきます。

(2019年3月15日修正)サムネイルに関する各機能は動作しないサンプルコードに修正しました。

基本的には上記の形で使うことを想定したカスタマイズ例になっています。

STINGER PLUS 2の場合

サンプル画像やサイトで実装している、各カテゴリーの色分け表示はAFFINGERの標準機能のためSTINGER PLUS 2では動作しません。

カスタマイズ次第で実装できますが、本記事では省きます。

デモサイトはコチラ

カスタマイズ実施

それではまず、ギャラリーのイラストページのみ先述の表示になるようにカスタマイズをしていきたいと思います。 事前にカテゴリといくつかのテスト投稿を用意しておいてくださいね。

1.編集するテンプレートデータ

今回のカスタマイズで編集するテーマファイルは下記です。

  1. category.php
  2. itiran-thumbnail-on.php
  3. st-single-category.php

この3つをリネームして編集していきます。

親テーマのZIPを解凍して該当するPHPファイルを別フォルダなどにコピペして作成していくのがオススメです。

ちなみに上から

  1. カテゴリーの一覧表示で使うテンプレートファイル
  2. 一覧表示の1記事をループさせているテンプレートファイル
  3. カテゴリー表示で使うテンプレートファイル

にとなっているみたいです。

1のファイルで2のファイルを表示するように指定して、2ファイルで3のファイルを使う…という感じです。  

2.「category.php」を編集する

2-1.「category.php」を「category-スラッグ名.php」に変更する

今回はまず手始めに「ジャンルA」のイラスト一覧(スラッグ名:illust-a)を変更したいので「category-illust-a.php」にリネームします。

テンプレートファイル名にカテゴリーのスラッグ名を入れる詳細な理由が気になる方は、「WordPress Codex:テンプレート階層」を確認していただければと思います。

2-2.コードを修正する

101行目の以下のコード

ここを下記のように変更します。

category.phpの編集箇所はここだけです。

STINGER PLUS 2の場合

81行目に同じコードがあるのでそこを修正します。

3.「itiran-thumbnail-on.php」を編集する

続けて、category-illust-a.phpで指定したテンプレートファイルを作成していきます。

3-1.「itiran-thumbnail-on.php」を「itiran-thumbnail-on-illust.php」に変更する

「itiran-thumbnail-on.php」はサムネイル有りの時に使用している(っぽい)テンプレートファイルです。 このファイルを複製して、末尾に「-iilust」を付けたものを作成します。

3-2.コードを修正する

作成した「itiran-thumbnail-on-illust.php」の中身を以下のソースに置き換えます。

STINGER PLUS 2の場合

同じ内容でOKです。

元のテンプレートファイルからどんな修正をしたのか確認したい人はこちらをクリックしてください(折りたたんでいます)

インフィード広告の記述を削除

インフィード広告の設定をしていた場合、表示が崩れてしまうのでインフィード広告関連の記述はまるっと削除しています。

一次創作ならともかく、二次創作の同人サイトでアドセンス表示させたい人はいないでしょうし大丈夫かなとは思いますが、念のため。広告以外でも使い道あるかもしれませんしね。

サムネイル表示のタグを変更

サムネイルサイズが上手く表示されない事があったので、コードを変更しています。(2019年3月15日修正)

これによってテーマの機能であるポラロイド風などのカスタマイズは無効になります。

本文抜粋部分をカスタムフィールド表示に変更

説明文は本文の抜粋ではなく、カスタムフィールド「note」で任意に入力する仕様にしています。18~22行目のあたり。

以下のサイトを参考に「カスタムフィールドに入力があれば表示し、一定の文字数を超えるとカットする」仕様にしています。(仕様になっているはず…ですw)

参考サイト

カード型カスタマイズのため、リンクの構成を変更

各サムネイルやタイトルに設定されていた記事へのリンクを全て削除し、最終行に「記事ページへ」というリンクを追加しています。

カテゴリー表示用のテンプレートファイルを変更

カテゴリーとタグを並べて表示したいのと、カード型カスタマイズのためにカテゴリーへのリンクを削除したいので専用のテンプレートファイルへの指定に変更してます。

こちらの内容は次の項目で説明します。

4.「st-single-category.php」を編集する

デフォルトの投稿一覧だと、カテゴリーには各カテゴリー一覧へのリンクが設定されています。

カード型で一覧表示にする都合から、このリンク設定を外したいのでカスタマイズしていきます。

また、カテゴリーと横並びにする形でタグも表示できるようにしたいのでここで併せて追加します。

4-1.「st-single-category.php」を「st-single-category-nolink.php」に変更する

今までの流れと同様に、元にするテンプレートファイルを複製してカスタマイズ用にリネームします。

「st-single-category.php」を複製して、末尾に「-nolink」を付けたものを作成します。

4-2.コードを修正する

作成した「itiran-thumbnail-on-illust.php」の中身を以下のソースに置き換えます。

STINGER PLUS 2の場合

同じ内容でOKです。

元のテンプレートファイルからどんな修正をしたのか確認したい人はこちらをクリックしてください(折りたたんでいます)

カテゴリーごとのリンク記述を削除

修正前の11行~15行目にある細かいリンク記述(aタグ)を削除しています。

リンクなしの状態でタグを表示させるコードを追記

修正後の16行目に、リンクなしの状態でタグを表示させるコードを追記しています。(2019年3月15日:コード内容を少し修正)

参考サイト

5.テンプレートファイルをアップロードする

ここまで修正が完了したらテンプレートファイルを子テーマのフォルダにアップロードしてしまいます。

参考

子テーマのフォルダは、下記になります。

./wp-content/themes/affinger5-child/

「functions.php」などが既にアップロードされているので同じところにアップロードしてください。

アップロード後、カテゴリーの一覧画面を表示して、「ページが真っ白!!」というような事が起こっていないか確認してください。

デモサイトでは下記のURLにあたるページですね。

https://sasa-memo.net/d-demo/category/gallery/a/illust-a/

真っ白の場合はどこかの記述が間違っていて、エラーになっています。

最近のWordpressはPHPのエラーチェックしてくれるので、管理画面の「テーマの編集」で更新ボタンを押してみるといいかもです。  

6.カード型のCSSを調整する

さて、いよいよ見た目を整えます。 以下のコードをカスタマイザーの「追加CSS」に記載してください。

参考サイト

こちらのサイトのコードをほぼコピペさせていただきました! ありがとうございます!

クラス名を「kanren」から「itiran-custom」に変更したり、「text-indent: 100%」を「150%」に変更したり、不要な記述を削除したりしています。

(2019年4月4日修正)「itiran-illust」から「itiran-custom」にクラス名を変更しました。

クラス名を変更した理由は「kanren」をそのまま変更してしまうと作品一覧以外のページも変わってしまうからです。

「itiran-custom」のクラスは「itiran-thumbnail-on-illust.php」の中で追加しています。

「text-indent」は100%指定では何故かボックスの右上にちらっと文字が見えてしまったため変更しました。

ここは何が原因なのかは謎なのでちょっと気持ち悪いのですが、ひとまず普通に動いているのでいいかなと。他のスタイルシートの影響なのだろうとは思いますが…う~ん。

なお、「gallery-tag」のクラスは4-2で追加しているタグ表示用です。お好みで内容を変更してください

完成!

ひとまずここまででジャンルAのイラストカテゴリーはカード型表示になりました。

その他のカテゴリーの一覧は何も変わりませんが、後々修正していきます

また、現在の状態だとデモサイトと異なりサイドバーも表示されていますがサイドバーがあった方が回遊性も高まると思うので、どちらにするかは好みの問題かなとも思います。

ちなみに、サイドバーを非表示にするには「AFFINGER5 管理」→「デザイン」→「サイト全体のレイアウト一括設定」の「カテゴリの一覧ページを1カラムにする」にチェックを入れるだけで非表示になります。

AFFINGER便利!!!!

ですがこの設定を行うと、ブログ記事の方のサイドバーも非表示になってしまうので、デモサイトではテンプレートファイルのカスタマイズを行っています。

非表示にするカテゴリー選べたらいいんだけどなぁ。よく探すと設定あったりしないかな??

今日のひとこと

ささお
なかなかのボリュームの記事になってしまいました。でもここが一番最初の大きな山だと思います!

記事を書きながら自分の同人サイトのカスタマイズも進めているのですが、Galleryにコツコツ過去作品を投稿していくのが地味に面倒です…こればかりは手動でコツコツやるしかない…! ⇒CSVを使ってインポートしたら大分楽になりました。このあたりは機会があれば記事にしたいなぁ。

次回は小説の一覧画面をカスタマイズしていく予定です。

WordPressテーマ 「WING(AFFINGER5)」

詳しく見る

このカスタマイズ記事は有料テーマ「WING(AFFINGER5)」を使用しています。

ブログランキング・にほんブログ村へ
▲ランキング参加中▲
良かった! 役に立った! と思ったら押してくれると嬉しいです(^○^)
  • この記事を書いた人
ささお

ささお

ゲームやお絵かき、新しいもの、文房具が好きなどこにでもいるオタクです。 やりたい事が色々とありすぎてどれも中途半端になってしまうのが悩みのタネ。

人気記事

1

折角入会しているんだし! と、最近はTTFCでせっせと戦隊過去作品を視聴している笹生(@sasao_blog)です、こんにちは! TTFCは通信環境が安定していれば画質もすごくキレイなので、テレビで見 ...

2

どうもこんにちは。ゲームも好きですが文房具もなかなか好きなささおです。 ジブン手帳は「トモエリバー」という紙を使っています。これはほぼ日にも使用されている手帳用の紙で、薄いのに裏移りしない紙だそうです ...

3

ふと、ブログのダッシュボードを見ていたら「エマーソン 先祖」とかその手の検索結果で足を運んできてくれてる方がいらっしゃるようですね。 SO5でシリーズ初プレイという方なんでしょうか…? というわけで、 ...

4

その存在を知って以降気になってはいたのですが、ついに先日カキモリのローラーボールを入手しました。こんばんは、笹生です。 本当はインクスタンドでオリジナルインクを作って、それと一緒に買いたいなと思ってい ...

-同人サイトを構築する

Copyright© ささらメモ , 2019 All Rights Reserved.