WordPressで電子マニュアルを作る - 株式会社Casa TECH BLOG

はじめまして。開発担当の坂﨑です。主にPHPを用いての開発を担当しています。

不動産管理会社・仲介会社向けのWEBサービスや賃貸人向けのWEBサービスのマニュアルをWordPressで管理できるように開発を行いました。
紙のマニュアルだと
「更新までに日数を要する、特定部署に依頼しないと更新できない」
という問題がありました。
「更新がスムーズに行えること、部署に関係なく更新が可能になること」
を実現するため、一からシステムを構築するよりも、WordPressを使えばスムーズに更新ができ、更新できる人数が増えると考えました。
また、WordPressで1つ作成すると同様の手順で色々と作れるようになるため、その手順を記載したいと思います。

WordPress（ワードプレス）とはPHPで作られているCMS（コンテンツマネジメントシステム）の1つです。
https://ja.wikipedia.org/wiki/WordPress

空のテーマを用意する

インストール後にWordPressを起動するとデフォルトでテーマが選択されています。
マニュアル用のヘッダやフッタを使いたくてもデフォルトのテーマが影響して思い通りの動きにならないことがあります。
そこで空のテーマを用意し、必要なものを後から付け足すようにします。

footer.php
header.php
index.php
style.css

最低限必要なファイルはこれだけですが、投稿された記事用のテンプレートやサイドメニュー用のテンプレートなどを追加し、CSSやJavaScriptも配置すると以下のような構成になっていきます。

wp-content
└─theme
    └─空のテーマフォルダ
        ├─css
        │   └─CSSファイル
        ├─images
        │   └─ロゴやヘッダ画像など
        ├─js
        │   └─JavaScriptファイル
        ├─templates
        │   └─記事用のテンプレートファイル
        ├─footer.php（フッタファイル）
        ├─functions.php（共通処理）
        ├─header.php（ヘッダファイル）
        ├─index.php
        └─style.css

大枠はこれで完成です。デザイナーと調整してCSSファイルやJavaScriptファイルの追加や修正を入れて見た目を整えていきますが、空のテーマフォルダをzip形式に圧縮し、WordPressの管理画面からテーマをアップロードします。

WordPressの管理画面で行うこと

WordPressの管理画面にログインし、メニューの「外観」を選択すると画面上に「新規追加」ボタンがあります。
この「新規追加」ボタンを押下してテーマフォルダをアップロードします。
空のテーマが有効になればデフォルトのテーマの影響を受けずに思い通りの動きを実現できるようになります。

アップロードしたフォルダ内の『index.php』はTOP画面のテンプレートとして使われます。
また、記事を投稿する際はテンプレートに記事用のテンプレートファイルを設定して投稿します。
カテゴリを設定することで記事をカテゴリごとに分類することができます。

記事を表示する際に利用する関数

管理画面から記事を投稿して公開したら、次は記事を表示する処理を作っていきます。
まずはサイドメニューなどでカテゴリと記事の一覧を表示するための情報を取得します。

<?php 
$args = array(
    'orderby' => 'id',
    'hide_empty' => '1',
);
$categories = get_categories($args);
?>

記事が紐付いていないカテゴリは含めず、idの順番で取得するように指定します。続いてカテゴリに紐付く記事を一覧で取得します。

<?php 
foreach ($categories as $category) {
    $list = get_posts(array(
        'post_type'      => 'post',
        'cat'            => $category->cat_ID
    ));
}
?>

一覧で記事のリンクが選択された際の記事ページの表示は以下のようにします。

<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

the_title()で記事のタイトルを表示します。
the_content()は記事の本文を表示するために使います。

注意した方が良い点

ここまでで一覧ページから記事の詳細画面までを作ってきましたが、WordPressの開発時に注意した方が良い点をまとめました。

キャッシュ対策

CSSやJavaScriptを修正し、いざ本番に反映したはずなのに、キャッシュが残っているためか変更が反映されていないことがあります。

href="<?php echo get_stylesheet_directory_uri();?>/style.css
    <?php echo '?' . filemtime(get_stylesheet_directory_uri() . '/style.css'); ?>"

読み込むCSSやJavaScriptのURLが変われば、キャッシュではなく本体を見にいくようになるため、filemtime()でstyle.cssのタイムスタンプを取得し、CSSやJavaScriptを読み込む際にパラメータとして付与する方法です。
CSSやJavaScriptを修正した時に、タイムスタンプが変わるためキャッシュではなく修正した本体が使われるようになります。

カスタムフィールドによる記事のソート

カスタムフィールドに共通のキーを設定し、値にソート順を入れることで記事の並び順を任意に設定することができます。
その際にカスタムフィールドを設定した記事と設定していない記事が混在すると全ての記事をうまく取得できないことがあります。

<?php 
// カスタムフィールドを設定した一覧
$list = get_posts(array(
    'post_type'      => 'post',
    'cat'            => $category->cat_ID,
    'posts_per_page' => 20,
    'pages'          => 1,
    'orderby'        => 'meta_value_num',
    'order'          => 'ASC',
    'meta_key'       => 'sort_key'
));
// カスタムフィールドを設定していない一覧
$no_custom_list = get_posts(array(
    'post_type'      => 'post',
    'cat'            => $category->cat_ID,
    'posts_per_page' => 20,
    'pages'          => 1,
    'meta_query'    => array(
        array(
            'key' => 'sort_key',
            'compare' => 'NOT EXISTS'
        )
    )
));
$list = array_merge($list, $no_custom_list);
?>

この場合はカスタムフィールドを設定した一覧と、カスタムフィールドを設定していない一覧を取得し、array_mergeで１つのリストに結合することで実現することができます。

おわりに

開発者目線で見るとデザイナーにHTML、CSS、JavaScriptを作成してもらってから、WordPressのテンプレートとして組み込むのは、時間を要しますが難易度はそれほど高くないと思います。
マニュアルとして記事を投稿したらデザインがあたった綺麗なページとして表示されると、他のサービスでも使ってみたいという声が出てきたのは嬉しかったです。

今回は書けませんでしたが時間があったら、記事を投稿したらS3にHTMLを出力し、そのHTMLのみにアクセスさせることでセキュリティを向上した方法を載せたいと思います。