PHPを編集せずにWordPressで同人イラストサイトを作る

同人サイトのスクショ
同人サイトをリニューアルしました。
こんなカンジです。

イラストばっかりでうるさいですか?
いいんです。
一見して趣味に合わなければ、余計なところをクリックせずにサッとタブを閉じられる親切設計です。

今まではTwentyTwelveに子テーマを用意して、プラグインで色々くっつけて余計なものを削ってやってたんですが、ようやく理想のテーマVirtueを見つけたので乗り換えました。

ちなみに欲しかったのは以下の四点。

  • 前後の記事へのリンクを消せる
  • テーマオプションでCSSが記入できる
  • イメージスライダー
  • ポートフォリオ(ギャラリー)

たったこれだけなのに、全部クリアしてるテーマが2014.7月上旬時点でこれしか見つけられませんでした。
直接PHPを弄ったり子テーマを作るのが面倒だったので、テーマオプションで設定できてとても便利です。
オプションが豊富なテーマです

ジャンルが定まってないイラストサイトなので、トップページで全てのジャンルを表示するための、イメージスライダーとポートフォリオです。
WordPress標準のギャラリー機能も悪くはなかったんですけど、こういうのがしてみたかったので。
ポートフォリオのスクショ

投稿記事の方には雑談的なことを書いたりもしてるので、ほぼフルサイズのイラストとデータだけのページもいいかなと思ったんです。でも結局色々と事情があって、WordPress標準のギャラリーも使っています。

最近は「WordPressで同人サイトを作ろう」的な記事が増えて、WordPress.comも含めてWordPressの同人サイトを目にするようになりました。
ですが割とPHPを弄らないといけないカスタマイズが多い(中にはテーマ自作の勧めもある)ので、PHPの知識がない人には敷居が高い印象です。
でもテーマオプションが豊富なテーマとプラグインを使えば、PHPを編集しなくても同人サイトは作れます。作りました。

という訳で、どうやってPHPを編集せずにWordPressで同人イラストサイトを作ったかを書いていきます(でもCSSは使いました)。
自分好みの無料テーマを探す根気>>>越えられない壁>>>PHP
という私のやり方なので、他の人とは全然違うアプローチです。
ちなみにここからの話は「meta robotsを知っている」、レンタルサーバかローカルに「WordPressをインストールしている」前提で進みます。
インストール方法はググれば沢山出てきますので、ここでは割愛します。

前提はこのくらいにして、大まかな流れとしては以下のとおりです。

  1. 最低限必要な機能をリストアップする
  2. リストアップした機能が実現できるテーマとプラグインを探す
  3. ローカル環境やメンテナンスモードプラグインで実際に試してみる
  4. 全て実現可能だったら公開する

HTMLサイトを作るときと大して変わりませんね。
でも導入してしまえば更新はHTMLサイトより楽になります。そのための苦労と思えば安いです。
では順を追ってやっていきます。

最低限必要な機能をリストアップする

私がイラストサイトを作るにあたって、最低限これは必要と思ったものはこの三点。
「検索避け」「表示させる記事を選べる」「前後の記事へのリンクを消せる」
いわゆる女性向けサイトだとイラストが大量に表示されるトップページは少ないですが、WordPressではトップページを自由に設定出来るので、そこはあまり問題ではないと思っています。
それよりgoogleにインデックスされるかどうかの方が問題だと思います。広く見せたい人も狭く見せたい人も。
そしてジャンルに合わせて表示される記事をコントロールしたいですよね。
そんな理由でのこの三点です。

実現できるテーマとプラグインを探す

まずは先に挙げた三点がクリア出来るプラグインやテーマを探します。

検索避けですが、All in One SEO PackやWordPress SEO by Yoastで簡単に実現できます。
ひとつひとつの単独記事だけでなく、アーカイブページなどにもmeta robotsを設定できます。
アバウトやコンタクト用固定ページなどは、インデックスされないようnoindex,nofollowを入れています。

表示させる記事を選べる…ちょっと変な言い方ですが、私の場合だと更新履歴も記事として投稿していて、これを「最近の投稿」に表示させたくないからです。
これはAdvanced Category Excluderを使っています。

前後の記事へのリンクを消す。これはテーマのテーマオプションで実現できました。
これは地道にポートフォリオ系テーマのデモを見たり、実際にDLして確認するしかなさそうです。面倒ですが意外に見つかります。
こちらもやはり更新履歴と成人向けが簡単に表示されないようにするためです。このリンクを辿れば私のサイトだと 東方→オリジナル→更新履歴→成人向け のような感じで表示されてしまいます。
ジャンル的にもゴチャゴチャして気分がよくないです。

最低限必要な三つの条件がクリアできたので、次に必要な条件をどんどんクリアして行きます。
●テーマオプションでCSSが記入できる(日本語フォントを指定したい)
 →テーマのインストールでテーマオプションで絞込んでDLして確認
●イメージスライダー(違うジャンルのイラストを一箇所で表示したい)
 →プラグインがあるのでテーマになくても可能
●ポートフォリオ(もしくはギャラリー)
 →プラグインがあるのでテーマになくても可能
…こうやってテーマとプラグインを揃えたら、実際に動かしてみます。

実際に試してみる

私はXAMPPでローカル環境を用意して試しましたが、なければUnder ConstructionやWP Maintenance Mode等を利用してメンテナンスモードにして試せばいいと思います。
準備が整ったら全てのプラグインを有効にして、競合がないか調べます。
テーマオプションが豊富なテーマは、Lightbox系やToTop系機能が実装されている場合があるので、テーマの機能で充分なのか、プラグインの機能が欲しいのかもここで検討します。
競合がなければデザインを整えて記事を投稿して、公開します。

実際に気をつけた部分は、単独記事を表示したときにサムネイル+画像+文章にならないことと、日本語フォントを指定したことです。
イラストサイトなので、サムネと本文画像を同じ画像にしています。なのでサムネと本文画像が重複表示されないようにしています。
この部分はテーマによっては変更できないので、ここに重点を置くならテーマ選びに注意が必要です。

日本語フォントはテーマオプションのCSS記入欄に!important付きで記述すれば、こちらの指定が優先されます。

body {
font-family: "ヒラギノ 角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo" sans-serif !important;
}

最近の海外テーマはGoogle Fontsが主流でメイリオなどで表示させるのが難しいので、テーマオプションのCustom CSSは出来れば欲しい機能です。
CSSを記述

実現可能だったら公開する

公開したら、出来れば複数のブラウザで確認します。
ちょっとしたレイアウトや挙動の違いがあると思います。
それが許容できる範囲ならそのままで、もし気になるなら、PHPを弄らない範囲で設定を微調整します。こういう時もテーマオプションが充実していると便利です。

長くなりましたが以上で終了です。お疲れ様でした。
有料のテーマを購入すればもっと楽かも知れませんが、無料テーマでも出来ますよということで。

実際にはもっとプラグインを入れているので、同人サイトで使っているプラグインと用途をすべて挙げておきます。
いくつかのプラグインは機能が少しずつ被っていますが、設定はどれかひとつで十分です。
複数のプラグインで同じ設定をすると、重複して逆効果になることがあります。

Advanced Category Excluder →表示させる記事を選ぶ 過去記事
Akismet →スパム防止
Better Delete Revision →不要なリビジョンを削除してデータベースを軽量化
Google XML Sitemaps →インデックスされたくないページはサイトマップに含めない方がいい
Simple Login Lockdown →不正アクセス対策
Under Construction →メンテナンス中の表示が出来る
Virtue ToolKit →テーマ専用プラグイン
WordPress SEO by Yoast →meta robots用
WP-Slimbox2 →ギャラリー画像をストレスなく閲覧するため 過去記事
WP Multibyte Patch →日本語環境では必須
WP Total Hacks →主にセルフピンバック防止とリビジョンを抑えるため

ちなみに以前利用していたContact Form 7とjQuery lazy load pluginとDynamic To Topは、テーマに類似の機能があったので削除しました。
他にあると便利と思われるプラグインはこちら。

yaWeb拍手(更新期間注意) →おなじみのweb拍手 過去記事
Newpost Catch →サムネつきで新着記事を表示 過去記事
WordPress Related Posts →サムネつきで関連記事の表示 過去記事
WP Social Bookmarking Light →SNSボタンをまとめて表示 過去記事
WP to Twitter →記事を投稿すると自動ツイートしてくれる 過去記事
Password Protected →サイト全体にパスワードをかける

スポンサードリンク
Pocket
LINEで送る

Bookmark the permalink.

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • スポンサードリンク