アラキノ採掘場

名前を考えていたら1時間経った

WordPressで夢小説サイト作った(2.工程)

こんにちは。
今回は実際にサイトを構築した工程について書きます。
詳しい作り方はググればめちゃくちゃ沢山出てくるので、ここでは実際に参考にしたサイトを紹介しながら端的にまとめていこうと思います。

技術的に詳しい人がこの記事を読んだら中身の無さに鼻で笑い飛ばすかもしれませんね……。

 

目次はこの通りです。

 


1. レンタルサーバーを借りてWordPressをインストールする
2. WordPressの設定を行う
3. サイトコンテンツを作成する

初っ端から省きまくります。

これらの工程については「HITSUJI COTTAGE」様がめちゃくちゃ参考になりました。

hitsujicottage.com

二次創作者にとても親切なコンテンツを沢山展開してくださっています。今回のサイト構築は此処が無ければ成り立ちませんでした。ありがとうございました。

基本的な設定を行うにあたって参考にしたのが「WordPressで名前変換小説サイトを作る」という全8回のコラムでした。説明に従って操作を進めれば、気付くとサイトが完成しています。すごい。
ここで作成できるサイトの枠組みは以下の通りとなっております。

  1. トップページ //★
  2. アバウトページ //★
  3. メインコンテンツ(名前変換フォームと小説) 
  4. ブログ //★

今回、実際にサイトに取り入れた構成は★が付いているものになります。
メインコンテンツの展示方法については同じくHITSUJI COTTAGE様が配布してらっしゃるプラグインを使用して作りました(後述)。
こちらのコラムでは固定ページを使って夢小説ページを作成しているのですが、連載作品を沢山書いている物書きとしては結構ヘビーな方法でして……。50話以上も固定ページをこしらえるのはちょっと厳しいなと思ったので……。

 


4. テーマを選ぶ

一般的なWordPressのメリットの一つは「テンプレートが非常に多い」だそうです。

サイトを作る時ってここらへんの作業が一番楽しいですよね。私が選んだのはこちらのテーマになります。

ja.wordpress.org
WordPressでテンプレートの話になると必ず「親テーマ」「子テーマ」という用語が出現しますが、簡単に言うと「テンプレートの改造は原本じゃなくてコピーをいじるようにしようね」ということです。原本=親テーマ、コピー=子テーマです。
字面的になんとなくそんな感じはしますね。


子テーマの作り方について参考にしたのは此処です。 

requlog.com

サイトを作り始めた時期に子テーマを一つ作ったとしても、デザインをいじるうちに色々改造したい所が出てきて何度か修正版をアップする事になるので(私はなった)、子テーマの作り方はしっかり覚えておいた方がいいかもしれないです。

 

 

5. プラグインを導入する

今回インストールしたプラグインは以下の通りです。

  1. Akismet Anti-Spam
  2. SiteGuard WP Plugin
  3. TinyMCE Advanced
  4. WP Multibyte Patch
  5. WP-Ban
  6. Dream Name Change
  7. Maroyaka WebClap for WordPress
  8. Add Novels Post type
  9. Custom Post Type Permalinks

 検索避けは標準の設定で行えるので、基本的にはセキュリティの強化や二次創作コンテンツに特化した拡張機能が中心です。ちなみにWP-Banはまだ有効化していません。

 

ところで、WordPressにはCGI版とモジュール版の2種類があるんですが、私が使ってるのはCGI版です。モジュール版に比べるとアクセス速度に負荷がかかりやすいそうですが、実際にこの数を導入した感想としては、極端な遅さは感じませんでした。
時々キョトンとされる事はありましたが……。


1~6についてはHITSUJI COTTAGE様でも説明されていた気がするので、7〜9について(プレゼンを兼ねて)説明します。

 

maroyaka.xyz

 

ページ遷移せずにワンクリックで拍手が送れてしまうヤバい機能です。
しかも設定によってはクリック時にメッセージを送れるウィンドウも出せるので、隙あらば感想が欲しい人にとっては非常にありがたいです。
また、自分で設置用のコードを張らなくても一律で設置する場所と位置を決めることができます。

f:id:sputnikno9:20180907013001p:plain

こんな感じですね。

 

ただし、設定ページで設置位置を決めてしまうと、場合によってはレスポンシブ対応デザインを作りたい時に厄介な存在になってしまう欠点があります。
「PCで開いた時は中央表示にしたいけど、スマホで開いた時は左寄せにしたい」みたいな。
あとはデザインとかもいじりたいですよね。フラットデザインにしたい、とか。
ちなみに私はどちらも当てはまったので、プラグイン編集ページでソースをいじって設置しました。

それについてもまた今度書きます。

 

 

  • Add Nobels Post Type

hitsujicottage.com

 

HITSUJI COTTAGE様が配布している例のプラグインです。これがあれば簡単に夢小説が展示できます!


WordPressにはブログを投稿するための標準形式があるのですが、同時に「カスタム投稿タイプ」という投稿形式を自由に作ることもできます。カテゴリーの使い分けみたいな感覚でしょうかね。

こちらのプラグインでは「長編小説」と「短編小説」の二つの形式を作れます。

 

さらに投稿作品を展示するためのHTML出力関数もあって、展示したい固定ページに関数を呼び出すショートコードを張り付ければあっという間に目次ページの完成です。

その関数も自分でいじれるのですが、私は以下の2点について改造してました。

  •  「章や作品タイトル」の設定情報にある「説明文」を出力HTMLに組み込む
  •  パーマリンク構成を変更する

 

また、現在の仕様ではデフォルト名が一つしか設定できず、設定できる項目も「名字」と「名前」の2項目のみとなっております。

ですが、年内にアップデート版をリリースするとの事です。実装して頂けたら非常にありがたい……超楽しみにしています。

 

  • Custom Post Type Permalinks

design-plus1.com

 

配布元サイトが英語なので、説明の丸投げも兼ねてこちらのサイトを貼っておきます。

名前の通り、カスタム投稿タイプのURL構成をいじることができます。

パーマリンクは言ってしまえばURLと同じ意味の単語です。

なお、パーマリンクを明示的にするとSEO的にメリットもありますが、今回は利益とは無縁の二次創作サイトを構築することが目的なので、そちらは全く考慮していません。

あくまで個人的なわかりやすさ重点です。

 

実際にコレを使ってどのように変更したか説明します。

変更前のURL構成を例えると

http://hogehoge.jp/novel/Prologue.php

こんな感じでした。連載小説のプロローグページのURLです。

ちなみに「novel」はAdd Nobels Post Typeで作成した「長編小説」のスラッグです。

 

しかし、もしサイトに複数の連載作品があった場合、この調子でページを作っていくと

http://hogehoge.jp/novel/Prologue.php

http://hogehoge.jp/novel/Prologue-2.php

http://hogehoge.jp/novel/Prologue-3.php

http://hogehoge.jp/novel/001.php

http://hogehoge.jp/novel/001-2.php

こうなっちゃうんですよね。

……えっと…すごくわかりにくくないですか……?

もともとWordPressはブログサイトを作るためのシステムなので、ぶっちゃけ世の中でこんな不満を抱くのはWordPressで小説サイトを作ろうとしてる人ぐらいなもんでしょうけども。

 

せめて「どの作品の」「どのページか」という情報は分かりやすくしたいと考えた結果、このようになりました。

http://hogehoge.jp/novel/momotaro/Prologue.php

http://hogehoge.jp/novel/momotaro/001.php

http://hogehoge.jp/novel/kintaro/Prologue-2.php

http://hogehoge.jp/novel/kintaro/001-2.php

http://hogehoge.jp/novel/urashima/Prologue-3.php

タイトルのスラッグを挟むことで、どの作品に属しているページか分かるようになりましたね。

強いて言えば「-2」の部分が邪魔だなと思うんですが、時間が惜しいのでそこは考えないことにしてます。

 

 

さて、ここまでの工程で

  1. サイトを作る
  2. デザインを決める
  3. プラグインをインストールする

 という手順をマッハで説明しましたが、いかがでしたでしょうか。

もっと細かく説明したほうがよかったでしょうか。

もしWordPressでサイト作成を考えている物書きさんへ興味を持ってもらえたら幸いです。

 

おそらくPCを触ることに慣れている人なら、数日あれば納得いくレベルまで構築できてしまうと思います。

「ここはもっとこういうふうにしたい」と思い始めると動作確認と編集の泥沼に陥りますが、それはそれで結構楽しかったりします。そう言いつつ完成まで2週間以上かかったりしてめちゃくちゃ辛かったんですけど。

 

次の話

次はプラグインを実際に適用した際に行ったソースの改造についてお話します。

phpについての話がメインですが、マジで「ここを直感でこうしたらイケた」とか書いてるので軽い気持ちで読んでもらえたら良いです。

あわよくば参考になれたらもっと良いです。

 

 

WordPressで夢小説サイト作った(1.経緯)

初めて読んだ夢小説サイトはDreamMaker1が使われていました。

こんにちは。

このたび運営している名前変換小説サイトの改装に伴い、WordPressを導入しました。つらかった事や陥ったバグは全て都合よく忘れてしまう性質なので、備忘録としてここにまとめを記しておこうと思います。なお「夢小説とは」「名前変換とは」といった基本的な知識については一切割愛致しますのであしからず。

 WordPressの導入を検討されている夢書きさんへのご参考にでもなれれば幸いです。

 

※プログラミング知識が疎いうえ、意識も低いので「よくわからないけどこうやったら動いた」というノリで書いていきます。

 

経緯

今回は経緯についてお話します。

一言で申しますと、PCサイトを楽に管理したかったからです。

それこそナノやアリプラのようにできれば最高なんですが……じゃあ携帯サイト作ったら良いじゃんという話なんですけど……でも最近のあそこってあれじゃないですか……。

そもそも携帯サーバーのサイト運営に慣れきってしまったオタクがFTPとエディタを駆使して継続的にPCサイトを運営するなんて到底ムリな話だったんです。そこですんなり出来てしまえばこんなブログ作ってないです。

 

 

しかしPCサイトという比較的フリーな環境で作品を公開できるのは魅力的ですし、さらに管理方法を楽にできるならやってみたい。しかしCMSって敷居が高いし、PHPもJSもjQueryもろくにできないしな……ともだもだしていたところ、どうやらWordPressでも簡単に名前変換機能を実装する方法があるらしいと聞き、それならいっちょ試してみるか〜と至りました。

 

次の話

次はWordPressインストールから完成までの手順と、導入したプラグインのお話をします。本題はここに詰まっています。