WordPressで同人サイトを作ったよ 完結編

 

とりあえず改装中のブログでメモ代わりにやってた前回まで
WordPressで同人サイトを作りたいその①
WordPressで同人サイトを作りたいその②
WordPressで同人サイトを作りたいその②(カテゴリ内移動リンクの話)

でもなんか色々難しい事やったけど結局③以外は忘れてくれて良くて初心に立ち返って自分の知ってる方法で作ったよって話です。

使用テンプレート

同じ作者さんの「CoCoon」が良いかも、とかいってたんですが結局感想ブログでも使っている「Simplicity2」に子テンプレートを作ってカスタマイズしていきます。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

Cocoon便利なんですが、使い慣れてないのもあるとおもうけど割と自力で修正したい部分が多いとき制約が増えるなあって印象でした。Simplicityだとある程度のデザインはテンプレート側におまかせできて、好きなところをいじれます。その名の通りデザインもシンプルなので好き勝手いじりたいときには向いてる。こちらの作者さんのテンプレート、管理画面のカスタマイズからある程度のところまでデザインをいじることが可能+スキンである程度見た目を変えることも可能なので、割と初心者から上級者までに幅広くおすすめできると思います。

個人的に唯一のデメリットはテンプレートのパーツが分かれすぎててどこがどこだかわかんなくなることですかね。でも割と有名なテンプレートで検索すれば似たようなカスタマイズ事例が出てくるので、難易度は低めかと。

同人/イラストページトップ

親テーマから「list.php」あたりをもってきて、「category-○○.php」にリネーム(○○は自分で設定したカテゴリのスラッシュ名かカテゴリのID)。これで目当てのカテゴリトップのみデザインを変えることができる。基本サムネ+αくらいの情報量にしてギャラリーっぽいデザインで並べる。

同人ページのトップに活動傾向や予定などを入れたい

投入したい文章を固定ページに書いて下書き保存→カテゴリトップに表示させました。どちらにせよカテゴリトップは弄るのでそこまでの手間ではない。

hitsuji.me

こちらがわかりやすかったです。

画像の拡大には「Easy Fancy Box」というプラグインを導入しました。

同人ページ/個別ページ


Advanced Custom Fieldsの全フィールドタイプを徹底解説
WordPressプラグインのAdvanced Custom Fields(ACF)の全フィールドタイプと各項目を画像付きで徹底的に解説します。使い方のわからないフィールドや項目があるなら、この記事を参考にしてください。

「Advanced Custom Fields」プラグインを導入して「同人」カテゴリで記事を作ったときだけ専用のカスタムフィールドが出るようにしました。
カスタムフィールド系のプラグインは感想ブログでも他のやつを使っているのですが、こちらだとカテゴリによって表示させる内容を切り替えたりできるので便利。イラストページはそのまま画像を載せてるだけなんですけど、後で時間あったらキャラ名とかツール名とか書く場所作ってもいいかな。ちなみに感想ブログのカスタムフィールドは使うことが多いので全ページに表示されている。


↑こんなかんじで共通化できそうなところはぜんぶ項目を作り、その項目を使ってテンプレートを作る。「entry-body.php」のどこかにカテゴリかカスタムフィールドの入力あたりでテンプレートが表示されるようにする。適当な名前のphpファイルを作って挿入すると複数の箇所に挿入しても一気にデザイン変更できるのでおすすめ。本文サンプルは「メディアを挿入」→「ギャラリーを作成」で整えて本文に挿入してます。

ただ、カスタムフィールド+phpテンプレートで挿入してしまうと本文側に反映されないのでRSSとかで読むと情報量の無いページになってしまうのが悩み。このへんはちょっと後で考えたい(感想ブログの方は必要な情報をテンプレ出力→コピペボタンをつけて抜粋に貼ってるので多分そうするかも)

関連記事とか入れたい

Simplicity2にはデフォルトで関連カテゴリ表示機能があるんですけど、あんまり頭が良くないので「SimilarPosts」という関連記事用プラグインを別に入れてる。これだとカテゴリ・タグ・本文の内容等で統括的に関連記事を選んでくれるので割と的確なやつが出やすい。

やりかたは「related-entry-card.php」の内容をSimilarPostsの呼び出しタグに書き換えるだけです。あとはプラグインの「Output」設定から。

トップページの設定

トップ出来るだけシンプルにしたい+新着を読み込ませたい。

htmlにWPの内容を読み込ませるという方法もあるにはあったんですが、さくらだとちょっとやりかたが違ってうまく実現できなかったので、トップをindex.phpにして必要な情報だけ読み込ませる形にしました。画像を大きめにしてイラストサイトっぽさ出してみましたがファーストビューでラノベ感想まで表示させたいので細かいところはあとで弄るかも……。

WordPress外からWordPressの記事一覧を表示させる | うぇぶこーぼー
ウェブサイトに表示させる記事をWordPressで書いて管理したいが、表示はWordPressではなく別のシステムでおこないたいという要望をかなえるためWordPress外からWordPressの記事を取得して表示する方法を説明いたします。

参考にしたのはここ。こちらに掲載されている情報だとシンプルにタイトルだけ取ってますがWPで使えるタグや構文はだいたい使えます。

気軽に告知とか入れたい。

「PostSnippets」というプラグインを入れて、管理画面からトップに文章を挿入できるようにしました(本文3行目の企画本に関するコメントが入ってるところがそれ)ショートコードはそのまま入れても動かないので、下記の形で入れました。

どうしてもソースコードが記事上に出せなかったのでスクショ……

メールフォーム・拍手の設置

ド定番の「Contact Form 7」というプラグインを入れてました。これ、色々増やせるみたいなのでそのうちお題箱的な使い方が出来ないか試してみたいですね……。

拍手は元々使ってるファイルをそのまま抜いてきて同人ページのテンプレートと同じく別ファイルにしてentry-bodyの本文下に挿入!終了!!という感じ。これも昔の拍手スクリプトで拍手元の情報とか含ませようとすると文字化けするのでそのうち対応したいですね……。

拍手はこちらのプラグインを導入してみました。だいたい自分のやりたいことが全部入ってる!
更新が数年ないのがちょっと不安なのですが、完全に止まってるわけではないっぽいから大丈夫かな…?

まろやかWEB拍手 for WordPress | まろやかPHP
PHP中心のスクリプトやWordPressプラグインを配布しています。

近い内に導入したいもの。

イラストページはタグで作品名等入れてるので、関連タグを表示させるようにしたい。

[WP] カテゴリのリストに関連するタグ一覧を付加する
ブログをリニューアルしたときに、カテゴリだけより情報があっていいかな~と思ってこういうのをやってみました(PCレイアウトのときだけ見れます)。最近Webの仕事をしてなくてトレンドや需要に疎いのですがメモ的にコードを残して
反応
なにかあれば
  • 買った(0)
  • 好き(0)
  • 面白かった(0)
  • 読んだよ(1)
  • 気になる(1)
  • いいね(1)