8日目: 公式ページを綺麗にしたお話

2015年12月8日

ごきげんよう．ひっこです．
この内容は2015年度の学園祭で配布された会誌をある程度修正した内容です．

1 概要

本会の公式ホームページ(http://www.rcc.ritsumei.ac.jp/)はWordPressで作成されてます．
理由は，サイトの管理が他社ではなく会内で行えるからです．
今回は本会のWordPressを自分なりにカスタマイズしたお話をしようと思います．

2 理由

なぜこのようなことをお話することになったのかというと，2年前から『サイトのデザインがダサいから変えてくれ』という要望がありました．ですが誰も変更せずにずっとそのままの状態でした．
2014年の12月にある事件が起きました．

『本会のサーバが壊れた』

本会のWordPressもそのサーバの中に入っているのでもちろんWordPressも含めて中身のほとんどは消滅…
なんとか記事のバックアップはできたものの，見た目はよりひどく…
で，コレを機会に(勝手に)ホームページリニューアル企画が始まりました．

3 カスタマイズ内容

ここでは具体的なカスタマイズの内容を書いていきたいと思います．
抜粋機能
子テーマ製作
メニューバー改造
パンくずリスト製作
Markdownでの編集機能
コード添付機能
Akismetでスパムコメント
SEO対策(編集中)
サイトマップ製作
ツイート，はてブ，いいねボタン設置
etc…

3.1 抜粋機能

投稿ページのトップで表示する場合，◯◯文字以降は『…続きを見る→』と表示しトップの見栄えを良くしました．

『続き読む→』を追加

3.2 子テーマ

テーマをアップデートすると通常編集したテーマのコードが初期化されてしまうので元に戻すのが面倒臭いのですが，この子テーマとは親テーマを継承して作成されてます．この子テーマにコードを編集します．WordPressのテーマは子→親の順番で読み込まれれ子親に同じファイルが存在する場合子テーマの関数が優先されます(ホントはオーバーライドされるが正しいけどね)．子テーマを制作することでアップデートされるのは親だけであり編集した部分は変更されることなく安心してアップデートすることができます．

3.3 メニューバー改造

ブログだけでなく『本会について』や『制作物紹介』，『年間行事予定』など作りました．

『ホーム』の右に『RCCについて』や『ブログ』，『制作物一覧』などのメニューバーを追加

3.4 Markdownでの編集機能

会員にはMarkdownで編集したいという要望があったのでJetpackの機能で追加しました．『#』や『*』などの記号を用いて見出しやリストができます．他にも『|』と『-』を使用して表作成ができます．

『#』や『*』で見出しや箇条書きができるように(デフォルトのWordPressでは専用のプラグインを入れないとできません…)

3.5 コード添付機能

アドベントカレンダーでコードを載せたいという会員のために『Crayon』というプラグインで設定しました．

3.6 Akismet

スパムコメントを取り除くことで個人や企業からのコメントを汲み取りやすくしました．(以前は設置されてませんでした…)
今では株式会社ビズリーチさんやドイツのフランクフルト大学大学からコメントきてます．RCCの知名がどんどん広がってきてとても嬉しいですね．

3.7 SEO対策

検索結果に引っかかりやすいように設定しました．まだ設定中ですなのであまり言えませんが，なるべく早くします．ごめんなさい…

3.8 サイトマップ作成

ホームにサイトマップを設置しました．軽くですが説明文も付けたので初めてホームページに訪れた人でもわかりやすくしました．これは友だちの意見で書きました．

3.9 ツイート，はてブ，いいねボタン設置

Twitterやfacebookでの拡散やはてなのブックマークできるようにしました．これは『WP Social Bookmarking Light』というプラグインを使用してます．ぜひ拡散したりはてブしてくださいね．
他にもアメブロやmixi，LINEのボタンも用意されてますのでご要望があれば設置します．