チュートリアル①コスプレ動画特化サイト

サンプルサイトと同じサイトを作ってみる!

それではいよいよ実践です。

まずは、サンプルサイト「コスプレ動画特化サイト」と同じサイトを作ってみましょう!

Agent-Hの設定だけでなく、Cocoonの設定なども合わせて解説していきます!

閲覧パスワード : hhhhh

コスプレ動画特化サイト

カテゴリーを考える

サイトのコンセプトは「コスプレ」です。
カテゴリーごとに異なるジャンルで投稿させる作戦でいきます。

最初にコンセプトに合った「使えそうなジャンル」を探し、そのカテゴリーを作ります。

ジャンルを探すだけなので、対象カテゴリーは「uncategorized」のまま、
絞り込みを「ジャンルID」にします。

すると、ジャンルリストへのリンクがありますので表示させます。

コスプレっぽいジャンルにチェックを入れていきます。

このチュートリアルでは、この4ジャンルで説明していきます。

同一カテゴリーに複数ジャンルを投稿していく場合は、ここで[一括コピー]をクリックして選択したジャンルIDを取得すればいいのですが、このサイトでは1カテゴリー1ジャンルなので、一括コピー機能は使いません。

カテゴリー設定

WPの画面に戻って、カテゴリー設定画面を表示します。

チェックを入れたジャンル名でカテゴリーを作っていきます。
別ウインドウに分けて、並べて表示させると作業しやすいでしょう。
スラッグは小文字のアルファベットで指定してください(英語でもローマ字でもOK)

すべてのカテゴリーを作ります。

検索条件設定

Agent-Hの管理画面に戻って、各カテゴリーの作品検索条件を設定していきます。

ジャンルリストを見ながらジャンルIDを記入します。
4桁程度の数字だけなのでコピペするより打ち込んだ方が早いです。

次のカテゴリーへ

セレクトボックス項目を変更した際には自動的に保存されますので、
[変更をまとめて保存]は押さなくても大丈夫です。

同様にすべてのカテゴリーを設定します。

最後のカテゴリーは次のカテゴリーへ切替をしないので自動保存されません。
設定したら保存ボタンを押してください。

テスト投稿

cronの設定が正しければ、実行時間が来れば自動投稿が始まるのですが、ここではWP-Crontrol を使って即時テスト投稿をしてみましょう。

5回ほど実行してください。

連続実行しているとこのようにAgent_H(posts)が二つできてしまうことがあります。
勝手に消えるのでエラー側は無視してください。

投稿できているか確認します。

ちゃんと投稿できていました!

投稿一覧の表示設定

でも、このままでは見にくいので表示オプションを変更します。

見やすく改善されました。

投稿記事の確認

実際に投稿されたページも見てみましょう。

ここまでマニュアル通りに設定できていれば、『18禁チェック』もバッチリです。

まだ表示の設定はやっていないので、不細工なデザインですが、エラーも無くサイトが表示されています。

Cocoon設定

続いてデザイン的な作り込みをして仕上げていきましょう。

各設定項目を説明しながらサンプルサイトと同じデザインにしていきます。

スキン

スキンを変更することで、サイトのデザインを手軽に変更できます。

ヘッダー

サイト説明文をタイトル下に移動しました。

タイトル

検索エンジンでの表示設定です。

上記設定で、このように変わります。

【デフォルト】

【変更適用後】

個別ページの設定も変えました。

カテゴリー・タグページの設定も変えました。

インデックス

トップページのここの表示形式を変更します。

反映させると、このように一番上が大きくなります。

投稿

ここの見出しと表示を変更します。

反映後はこのようになります(設定では最大6件表示)

パンくずリストをページの上の方に移動させます。

ページ最下部から、ここに移動しました。

SNSシェア

こういうのをすべて非表示にしました。

SNSフォロー

これを非表示にしました。

画像

トップに同じ画像が並ぶのを止めます。

カルーセル

これを表示させます。

保存

ウィジェット

もう一息です。
続いてウィジェットを設定していきましょう。

ウィジェットとはブログパーツとも呼ばれるこの部品のことです。

マニュアル通りに作業を進めていれば、このように「ブロック」という名前のウィジェットが5つ設定されているはずです。

不要なウィジェットの削除

一番上のウィジェットを残して下の4つを削除します。

このように設定ボックス外にドラッグ&ドロップすればOKです。

一つだけになりました。

ウィジェット設定は「更新」ボタンなどがありません。
変更すれば即時反映します。

検索だけが残っていれば現時点の正解です。

検索ウィジェット

もしも違うウィジェットを残していた場合は、以下の手順でコードを書き換えてください。

以下のコードをコピペして保存

<!-- wp:search /-->

新着作品

[C]新着記事をサイトバーブロックにドラッグ&ドロップ

[C]が付いているのはCocoon使用時に利用できるウィジェットです。

以下のように設定してください。

トップページはメインカラムが新着記事一覧なので、サイドバーにも表示すると情報が被ります。

上記のように「表示設定」しておくことで、トップページではこのウィジェットが表示されません。

最近のコメント

[H]最近のコメントを新着作品の下にドラッグ&ドロップします。

[H]最近のコメントはAgent-Hウィジェットです。

WP標準の「最近のコメント」やConoonの「[C]最近のコメント」ではコメントが正常に表示できません。

興味がある方は仮に設定して見比べてみてくださいね。

カテゴリー、タグクラウド

サイドバースクロール追従にドラッグ&ドロップします。

確認

正常に表示できました。

ファビコン

Cocoonテーマのファビコンを、オリジナルのものに変えます。

画像を用意

512 x 512 px の 画像ファイルを用意してください。
ファイル形式は、PNGやJPGなどお馴染みのもので大丈夫です。

画像ソフトを使って作っても良いですし、無料で使えるジェネレーターもweb上にたくさんあります。
無料素材をそのまま使っても構いません。

アドバイス
最近のスマホブラウザに対応するため512 x 512 px と大きな画像になっていますが、PCのブラウザで表示される時はこのサイズなので、細かすぎる画像では潰れてしまいます。

おすすめアイコン生成サイト

Favicon.io - The Ultimate Favicon Generator (Free)
Create a favicon.ico from an image, text, emoji, or SVG. Download a complete favicon package in one ZIP.

英語サイトですが、直感的に分かると思います。

用意したファビコンをWPへ設定する

用意したファビコンをアップロードします。

これで完成です!

一応すべて書いたつもりですが、もれがあったら追記するので教えてくださいね!