AVIATION ASSETS

陸上航空の教育訓練、運用、装備、安全等に関する米軍情報の発信源

コラム:WordPressを使ったウェブ・サイトの作成と運用

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

私の場合、最初は、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ループを変更することにより実現しています。この方法については、「manablog」さんの「『プラグインなし』で人気記事一覧を出力する方法」で知ることができました。また、「hijiriworld Web」さんの「WordPressのループの仕組みを深く知る query_posts() と get_posts() の違い」が参考になりました。ちなみに、現時点での「人気の記事」には、このコラムがランクインしています。あくまで「おまけ」として書いたこのコラムが思いのほか読まれていることに、びっくりしています。

インデックス(各カテゴリーごとの投稿一覧)は、標準状態では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」プラグインで!標準機能ではできない移動もできるよ!」で知りました。

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

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


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

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





コメント投稿フォーム

2件のコメント

  1. Hollis より:

    Hello, after reading this awesome paragraph i am as well cheerful to share my experience here with colleagues.cheap
    jerseys

  2. Coral より:

    Good day! I know this is kinda off topic but I was wondering which blog platform are you using for this website?

    I’m getting sick and tired of WordPress because I’ve
    had issues with hackers and I’m looking at alternatives for another platform.
    I would be great if you could point me in the direction of a good platform.wholesale nfl jerseys from China

« »