AVIATION ASSETS

陸上航空(陸上自衛隊航空科職種)の教育訓練、運用、装備、安全等に関連する米軍情報の発信源

ワードプレスを使ったウェブ・サイトの作成と運用

これもまた昔のことを言うと笑われそうですが、私が子供の頃には自分の文章を活字にしたり、それを一般に配布したりするのは、小説家や記者にでもならない限り非常に難しいことでした。ところが、今ではコンピューターやインターネットの発達により、誰でも簡単に自分の文章を活字にして読んでもらうことができるようになりました。

私の場合、最初は、HTML+CSSでウェブ・サイトを作っていました。ところが、投稿記事が100件を超えるようになると、その管理がかなり面倒になってきたのです。まず、ヘッダー、フッター、カテゴリーなどを修正するときには、各投稿記事のHTMLファイルをすべて修正しなければなりません。HTMLファイルを一括検索・置換するフリーソフトを使って対応していましたが、何十回も繰り返すとさすがに嫌気がさしてきました。さらに、各投稿記事に添付している画像ファイルは記事別のフォルダに保存していたのですが、どの記事のどの部分にどの添付画像がリンクしているのか、わけがわからなくなってきました。このため、投稿記事や添付画像の管理をもっと容易にしたいというのが、私がWordPressを使い始めた理由です。

以下、自分自身の備忘録も兼ねて、その作成と運用に関する特異な事項を簡単にまとめておきたいと思います。細部については、参考にさせていただいた諸先輩方のサイトへのリンクを記載しますので、そちらをご確認下さい。

Ⅰ ウェブサイトの作成

テーマの作成

私の場合は、既にHTML+CSSで作成したウェブ・サイトがありましたので、これを元に独自のテーマを作成しました。参考にしたのは、「Webデザイナー養成講座 WordPress」と「WordPress Web開発 逆引きレシピ」という本です。HTML+CSSの経験があった私にピッタリの内容で、効率的にテーマの作成方法を学ぶことができました。


HTML+CSSからWordPressへの変換にあたって、サイトの紹介だけは「固定ページ」にしましたが、それ以外のすべての翻訳や文献紹介の記事は「投稿」として扱いました(図1-1)。WordPressは、元々ブログ用に開発されたシステムなので、私のサイトにうまく適合できるのかが心配でしたが、後ほど紹介するカスタムフィールドを追加することで全く問題のない環境を整えることができました。

図1-1 記事はすべて投稿として扱い、「投稿一覧」で管理しています。

ヘッダー、フッターやサイドバーは、HTMLで作っていたものをほぼそのままテンプレートに置き換えることができました。これにより、ヘッダーを修正するたびに、全てのHTMLファイルを書き換える手間がなくなりました。なお、レスポンシブ・デザインの設定を含む全てのフォーマットは、既に作っていたCSSをほぼそのまま使うことができました。

先日、このウェブ・サイトが、とある方のスマートフォンでレスポンシブ・デザインによる拡大表示が行われていないことに気づきました。私が使っているi-Phoneでは問題がなかったのですが...調べたところ、HTMLのヘッド部分に「Viewport」を記述する必要があるようです。この設定に関しては、「Qiita」さんの「【CSS】スマホで Media Queries が効かないときの対処法」を参考にしました。もし、お使いのスマートフォンでレスポンシブ・デザインが設定できていないなどの不具合がありましたら、お知らせいただけると助かります。

ヘッダーには、パンくずリストを表示しました。個人的には、これが便利だとは特に思わないのですが、SEO的には表示した方が良いようですのでプラグインを使って実現しています。SEOに関する情報は、「SEO Pack」さんの「SEOに効く『パンくずリスト』対策ガイド」から得ました

トップ・ページ(ホーム・ページ)には、「最新の記事」と「人気の記事」のサムネール画像、記事の抜粋および出典を表示しています。以前は、「人気の記事」ではなく、「おすすめの記事」として管理人が選んだ記事を表示していましたが、私のサイトを見てくれる人も徐々に増えてきましたので、「人気の記事」に入れ替えました。人気記事の出力には、プラグインを使うのが一般的なようですが、表示スタイルを自由に設定したいので、function.php に関数を組み込み、WordPressループを変更することにより実現しています。この方法については、「Plusers」さんの「応用編1.記事へのアクセス数をプラグインなしで計測し管理画面に表示する」で知ることができました。クローラーからのアクセスやログイン中のアクセスをカウントしない設定についても、解説されています。また、「hijiriworld Web」さんの「WordPressのループの仕組みを深く知る query_posts() と get_posts() の違い」が参考になりました。

個別記事ページには、「関連記事」の一覧を表示しました。グーグル・アナリティクスで確認すると、殆どの方が目的の記事を読んだだけで、サイトから離れてしまっているようなので、他の記事も読んでいただきたいなと思ったからです。これも、プラグインを使うのが一般的なようですが、single.phpにWordPressループを追加することにより実現しています。この方法についても、「manablog」さんの「プラグインなしで関連記事を表示する方法」で知ることができました。同じタグが入っている記事を表示するようになっているのが、気に入っています。

各カテゴリーごとの記事一覧は、標準状態では10件ずつに区切って出力されます。最初は、プラグインを使ってページ送りを表示していましたが、記事を探すのが面倒になるので「表示設定」の「1ページに表示する最大投稿数」を増やして全てを表示できるようにしました。ただし、記事の数がもっと増えれば、見直しが必要かも知れません。「人気の記事」を表示するために設定したカスタム・フィールドの値を利用して、各記事のアクセス回数を表示するようにしました。

トップ・ページや記事一覧に表示される記事の抜粋の文字数はテンプレートを編集することにより制御できます。この設定に関しては、「ホワイトベアー株式会社」さんの「WordPressで記事本文を抜粋表示する文字数と文末の[…]を変更する方法」が役に立ちました。なお、この設定には、「WP Multibyte Patch」というWordPressに最初からインストールされているプラグインが必要です。

サイドバーは、管理画面に設定画面を設けることもできますが、頻繁に変更することがないのでテーマのテンプレートで直接設定しました。そのうえで、「Meteor Slides」というプラグインを使って、スライドショーを表示しています。このプラグインは、「楽々WordPressプラグイン」さんの「直感操作のイメージスライダー/WPプ ラグイン「Meteor Slides」」で知りました。同じようなプラグインは他にもありますが、設定画面がシンプルなのが気に入っています。なお、私の場合には、最初から日本語で表示されており、日本語化の設定を行う必要はありませんでした。また、インデックスや投稿記事のページのサイドバーには、「新着の記事」と「人気の記事」を縮小表示するようにしています。

図1-2 NotePad++の画面。右側にFTPが表示されています。

テンプレートの編集には、「Notepad++」というフリーソフトのエディターを使用しました。コードの色分け表示に加えて、「NppFTP」というプラグインをインストールすることでサーバー上でファイルを直接編集(しているように)できるので、とても便利です(図1-2)。このエディターの存在は、「YouStyle」さんの「FTPサーバー上のファイルを編集したい|ゴキゲンなエディターNotePad++を使ってみた」で知りました。Wordpressで独自のテーマを作る人には、ぜひお薦めしたいエディターです。

 

カスタムフィールドの設定

図1-3 カスタムフィールドを作成して、出典等を入力できるようにしています。

私のサイトの場合には、翻訳記事の副題、著者名、原典(添付ファイル)、出典等を記事の内容と区別して管理する必要がありました(図1-3)。WordPressにも標準でカスタムフィールドの機能が搭載されているのですが、管理画面の見た目が好きになれなかったので、「Advanced Custom Fields」というプラグインを使いました。

このプラグインの使い方は、エス技研さんの「Advanced Custom Fieldsの全項目解説・公開側表示編集編」に詳しく記載されています。特に「ファイルのmime_typeの取得」に関する説明のおかげで、ファイルの種類に応じたロゴ画像を表示できるようになりました。

また、トップ・ページやサイドバーに表示している「人気の記事」の表示に用いる「閲覧回数」についても、このプラグインのカスタムフィールドに追加しました。各個別記事の閲覧回数が確認できて便利です。

 

Ⅱ ウェブサイトの運用

投稿記事の管理

図2-1 Chromeのプラグインを使用してテキストエディタ上で文書校正を行っています。

WordPressのおかげで、アップロードした投稿記事や画像データを一覧表示でき、その管理が飛躍的に容易になりました。翻訳の終わった文章は、WordPressの投稿用エディタにコピー&ペーストでアップロードしています。

投稿に際しては、HTMLを直接記述する方が好みにあっているので、テキストエディタを使用しています。なお、ビジュアルエディターを使うと自動的に改行が修正されたりするので、「ユーザー」の「あなたのプロフィール」で「 ビジュアルリッチエディターを使用しない」に設定しています。

投稿の際のタグの入力は、IMEに自分が使用するものを単語登録しておいて、簡単にできるようにしています。このアイデアは、「Oblivionいじり アレコレ」さんの「HTMLタグを300%早く打つ方法~IME辞書の活用~」を参考にしました。

また、ブラウザ(Chrome)に「textlint」という文章校正プラグインをインストールして、WordPressのテキストエディタ上でも再度文章校正ができるようにしています(図2-1)。このプラグインについては、「もなでぃっく」さんの「文書校正ツール textlint の Chrome 拡張を作った」で知りました。

投稿記事を作成する際には、「Duplicate Post」というプラグインを使って、既存の投稿記事を複製してから修正しています。私のサイトの場合は、同じフォーマットを使う記事が多いので、非常に役立っています。このプラグインの使い方は、「AdminWeb」さんの「Duplicate Postプラグインの使い方」に説明されています。

図2-2 記事をブラウザ上で直接編集できます。

既にアップロードした記事を修正する際には、「Front-end Editor for WordPress」というプラグインを使って、ブラウザ上で記事を直接編集できるようにしています(図2-2)。このプラグインのおかげで、記事を新規作成するとき以外に管理画面のエディタを使うことはほとんどありません。このプラグインの存在は、「ほーくブログ」さんの「WordPressのリライト(記事の修正)を記事ページからそのまま行う便利プラグイン」で知りました。

投稿記事内の文字列を検索・置換したい場合は、 「Search Regex」というプラグインを使うと多数の投稿記事を一挙に修正できます。本文だけではなく、カスタムフィールドなどの文字列も修正が可能です。このプラグインの使い方は、「AdminWeb」さんの「Search Regexプラグインの使い方」に説明されています。

記事の修正などをするたびに、リビジョンが記録されてゆきますが、これがWordPressの表示速度に影響を与えているようです。「Better Delete Revision」というプラグインをインストールすると、リビジョンを削除することができます。このプラグインは、「ブログ工房」さんの「WordPress のリビジョン・自動保存機能を停止する方法」で知りました。

メディアの管理

図2-3 オプションを変更して、不要な画像ファイルの自動生成を停止しています。

WordPressを使用することで、画像ファイルの管理も以前に比べてはるかに容易になりました。ただし、インポート時にサムネイル・中・大の3つの大きさの画像ファイルが自動生成される機能は、画像ファイルの数をいたずらに増大させていました。このため、中サイズと大サイズのファイルは、自動生成しないいように設定しました(図2-3)。この設定に関しては、「NxWorld」さんの「WordPress:画像アップロード時の自動生成を停止する方法」が大変参考になりました。また、「Ver 4.4からさらに新たなサイズ(具体的には横幅が768pxの画像)が自動生成される」という情報は、大変貴重でした。

画像ファイルのサイズを変更しても、既に自動生成されたファイルはそのまま残ってしまいますし、記事のアイキャッチも元のファイルにリンクしたままとなっています。これを整理するプラグインが「Force Regenerate Thumbnails」です。このプラグインは、「Taka’s Life」さんの「不要なサムネイル画像を自動で削除してくれるプラグイン「Force Regenerate Thumbnails」」で知りました。

また、この自動生成のために、アップロードしたメディアを後から入れ替える場合にファイルをフォルダに直接コピーしても自動生成されたファイルがそのまま残ってしまいます。「Enable Media Replace」というプラグインを使用すれば、全てのサイズを一挙に入れ替えることができます。このプラグインは、「HATCHMAN」さんの「ワードプレスでアップした画像を簡単に上書き差し替え更新する方法 プラグイン編」で知りました。

バックアップと復旧

先日、データベースが壊れてしまい、バックアップしていたデーターから復旧しなければならない状況となりました。

バックアップについて、改めて重要だと思ったのは、「サーバーだけではなく、データベースのバックアップが必須」ということです。細部要領は、「Naifix」さんの「WordPress初心者でも簡単にできるバックアップ方法」に記載されています。

図2-4 XMLデータをインポートする際には、「添付ファイルをダウンロードしてインポートする」をチェックする必要があります。

復旧において重要なことは、「バックアップしてあったデータベースで使用中のデーターベースを上書きすることはできない」ということです。これをやってしまうと、投稿や固定ページが2重登録された状態になって、状況がますます悪化します(私もやってしまいました)。正しい復旧の手順は、「Naifix」さんの「バックアップデータを使ってWordPressを復旧・移行する方法」に詳しく説明されています。

この記事にも書かれていますが、XML データをインポートする際には、「添付ファイルをダウンロードしてインポートする」にチェックを入れないと、「投稿や固定ページ」と「メディア」とのリンクが復元しません(図2-4)。この時、importフォルダ(XMLデータが添付ファイルの保存場所として記録しているフォルダ)には、元のファイル名に「-1」が追加された画像ファイルが新たに生成され、これが投稿や固定ページにリンクされます。いろいろと試してみましたが、元のファイル名のままで投稿や固定ページとのリンクを復元することは、どうしてもできないようです。

この「-1」が追加されたファイル名は、「Media File Renamer」というプラグインを使うと、投稿や固定ページとのリンクを保持したまま、全部のファイルを自動的に元通りのファイル名に変更することができます。このプラグインについては、「 ワードプレステーマTCD」さんの「アップロード済みの画像をリネームするためのプラグイン「Media File Renamer」」で知りました。なお、このプラグインは、個別の画像ファイルを自分の好きなファイル名に変更することも可能です。その方法は、「Simple Living」さんの「メディアライブラリでアップロード済みの画像をリネームできる WordPress プラグイン Media File Renamer」で知りました。

また、XML データをインポートすると、すべての投稿に「未分類」のカテゴリーが追加されてしまいます。これも「Batch Cat」というプラグインを使うと一挙に修正できます。このプラグインについては、「ラブグアバ」さんの「カテゴリーの一括変更は「Batch Cat」プラグインで!標準機能ではできない移動もできるよ!」で知りました。

アフィリエイトの導入

このウェブ・サイトで収益を得るため、いろいろな書籍などを読んで試行錯誤を繰り返してきました。それらの書籍の中で、特に参考になったのは、「Google Adsense 成功の法則57」という本です。

結果的には、ウェブ・サイト開設から3ヵ月が経った現時点でも、全く収入が得られていないのですが、この本には、読者の立場に立った、失敗を恐れないサイト運営の考え方やそのノウハウなど、とてもためになることが書かれています。私のウェブ・サイトの場合は、内容が非常に専門的であり、しっかりとした目的を持って記事を読んでいる読者が多いので、ついでに広告をクリックする読者が、ほとんどいないのではないかと考えています。

Ⅲ より詳しくWordpressを知りたい方のために

このウェブ・サイトの作成・運用がある程度進んでから、もう少ししっかりとWordpressを理解したいと思った時に参考になったのが「WordPressのツボとコツがゼッタイにわかる本」と「WordPressユーザーのためのPHP入門」の2冊の本です。じっくりと腰を据えて、WordPressをものにしたい方にぜひおすすめします。


私の翻訳記事を皆さんに読んでいただけるのは、WordPressやプラグインを作成・公開したり、その使用法を紹介してくれた沢山の方々のおかげです。そういった方々に感謝しつつ、今後も大いに活用させていただこうと思っています。

発行:Aviation Assets, 28 March 2017
備考:本コラムの内容は、今後、修正される可能性がありますので、ご了承ください。






コメント投稿フォーム

6件のコメント

  1. 管理人 より:

    「おすすめの記事」を「人気の記事」に変更しました。

  2. 管理人 より:

    SEO関係のプラグインも色々と試しましたが、結局、シンプルなのが一番なのかなと思っています。「パンくずリスト」も止めてしまいました。

  3. 管理人 より:

    個別記事のページに「関連記事」の一覧を追加しました。

  4. 管理人 より:

    各記事の下側に「関連記事」と「コラム」の一覧を追加しました。

  5. 管理人 より:

    インデックスに各記事のアクセス回数を表示するようにしました。併せて、運用上の操作により、アクセス回数をダブルカウントしてしまっていたことが判明したので、アクセス回数を一度リセットしました。

  6. 管理人 より:

    アフェリエイトに関する記述を追加しました。




関連記事