WordPressでメディアサイトを基本に忠実に開発していく

Designed by Freepik
前回の「WordPressでメディアサイト運営する時に必要な4つのプラグイン」から時間が経ってしまいましたが、WordPressを使ったメディアサイトの構築シリーズの続きです。

準備に時間をかけましたが、ようやくゴリゴリ開発していきます。

とはいえゼロから作ると大変な上に、効率も良くないのでベースは市販のテンプレートにしつつ、テンプレートを基本に忠実なSEOに習って改造していきます。

最初から記事にするつもりでスクショ撮っておいたらよかったのですが、後から記事を書き始めたのでサンプルの例が非常にわかりにくいことを、はじめに言い訳しておきます^^;

ってことでこの記事は社内の手順書用と「実は結構細かい作業してるんですよっ」てところが伝わればOKかなと(^_^)

テンプレートを選ぶ

テンプレート選びは気に入ったデザインのものがあれば何でも良いですが、セキュリティーに気をつける必要があります。

プラグインと同じように、テンプレートも誰でも作れて誰でも公開できるので、テンプレート自体に脆弱性があったりスパムだったりする場合もあります。

WordPressの公式サイトからダウンロードするのが安全です。

リンクからmediaなどで検索するとベースとして十分なテンプレートは山ほどでてきます。

 

テンプレートを加工する

市販のテンプレートは見た目がかっこよくて、すごくアーティスティックだったりするのですが、タグの使い方がバラバラになっている場合もあるし、html構文のルールに従って整形していきます。

htmlとSEOの関係のややこしいところは、構文がデタラメでもかっこいいサイトは作れてしまうところなんですよね。

あとかっこいいテンプレートは海外発のものが多いので、その場合日本語で記事を書くと、フォントの調整がうまくいってなくて非常にかっこ悪くなることが多々あります。また、そもそも日本語の辞書ファイルがないテンプレートだと英語で表示される場合があるので、日本語辞書ファイルも作成します。

また、SNSのシェアボタンなんかも日本用にカスタマイズしないといけません。

例えば日本で主流のLINEとかは海外テンプレートでは割愛されてます。

テンプレートを自作するよりは簡単でイメージもつきやすいですが、それでも日本語最適化とSEO最適化とその他諸々で結構手を加えないといけないのです。

日本語辞書ファイルを作成する

とりあえず、海外製のテンプレートをダウンロードしたらまずやることはこれ。

標準のまま使うと、「アーカイブ」と表記すべきところが「Archives」になってたりよろしくないので日本語用の辞書ファイルを作っていきます。

辞書ファイル作成前の状態はこんな感じ。

赤線で囲ったところが修正すべきところ。

辞書作成にPoeditを使う

辞書ファイルの作成には Poedit というアプリを使うと早いし便利です。

 

詳しい使い方はググれば色々出てきますので割愛。

フォントを調整する

英語だと綺麗に見えるテキストも日本語ではバランスが悪かったりします。

CSSを加工してゴリゴリ調整していきます。

結構細かいところですが、ちゃんと細かい所をこだわらない見にくいしユーザビリティーも良くないんですよね。

例えばタグの表示の場合

デフォルトだと色が薄くてわかりにくいので

こんな感じに調整します。

 

記事一覧の場合こんな感じ。

こちらがビフォー

こちらがアフター

んー、全体のスクショを撮っておくべきだった^^; ちょっとわかりにくいorz

例えば記事を見るボタンも左から右へ行くので、右側に配置したほうが自然なのでCSSを調整します。

 

デザインを調整する

デフォルトテンプレートでもざっくりと綺麗な見た目で表示されますが、デザインの細かい部分が甘かったりするのでそのあたりを調整します。

例えば、今回使用したテンプレートだと細かい部分ですが検索フォームのサイズが整ってなかったので調整します。

 

修正したあとがこちら

こちらももっと例があったらよかったんですが^^;

SNSボタンを設置する

SNSボタンは日本でよく使われてるLINEやらはてブを自作しないといけません。

さらに、ページごとにシェアされたときのOGPを正しく設定していきます。

このあたりはプラグインを使って各記事でやらないといけない作業だったりもしますが、トップページでシェアされたときの振る舞いと、個別記事でシェアされたときの振る舞いはPHP側で制御しないといけない場合もあるので、こちらもこまめに動作チェックしていきます。

ウィジットを配置する

デフォルトのままだとさみしいので、いい感じのウィジェットを自作したりして貼り付けます。

とりあえず立ち上げたてのメディアだとそんなに特殊なウィジットを入れてもうまく機能しないので無難なやつを入れておきます。

管理画面を加工する

意外に大事な管理画面のデザインです。

デフォルトのWordPressだと公開画面に表示される見出しやテキストと、管理画面のフォームの見出しやテキストのフォントが違ってたりします。

実際の画面はプレビューで確認できるといえばできるわけですが、投稿画面で実際の記事と違って見えると見にくいし、作業効率も落ちます。

ということで投稿フォームを実際に表示されるスタイルと同じにします。

こちらが投稿フォームの見出し

実際に表示される見出しはこちら

 

 

また、選択フォームとかはなぜか明朝のフォントになってたりするのでそれも修正。

見出し選択フォームはこんな感じで修正

ビフォー

アフター

 

これでかなり使いやすくなりました。

まとめ

まあ、こんな感じで結構細かい仕事をするんですが、細かすぎて全然伝わらない記事になったかもです^^;

とにかく細かい修正をすると見た目的にも、結果的にも良いものができあがるのでちゃんとこだわりましょう!

完成したサイトは後日公開いたします♪

The following two tabs change content below.
西尾学
会社の代表やってます。遊ぶように仕事やってます。