子ページへのリンクを出力するショートコードを使ってラクをしよう!

今回は、WordPressのショートコードを使って、ラクしてしまおうという話です。

この記事はちょっと上級編です。

現在進行中のプロジェクトでの事例

以下のサムネイルは、現在制作中の某リゾートのページの一部です。

このリゾートには複数のタイプのコテージがあって、このページではそれぞれの概要が掲載されており、画像などをクリックすると詳細ページへ移動します。

WordPress内部ではページとして作成されていて、以下のようなツリー構造になっています。

  • 宿泊案内
    • ログハウス
    • コテージA
    • コテージB
    • コテージC
    • ….

で、宿泊案内のページを編集画面で見ると実際に入力されているコンテンツは、以下のような感じです。

実は本文の部分は簡単なテキストとショートコードが入力されているだけです。

ショートコードをインストール。

以下のソースをダウンロードしてプラグインとしてインストールしてください。

ページで抜粋を有効にする。

上述のショートコードでは、子ページの抜粋を表示しますが、WordPressのページにはデフォルトでは抜粋が表示されません。

WP Total Hacksプラグインをインストールして「ページに”抜粋”を追加する」を有効化してください。

投稿サムネイルを有効にする。

ショートコードで出力される画像はそれぞれの記事の投稿サムネイルです。

これはテーマのfunctions.phpに以下の2行を追加してください。

add_theme_support('post-thumbnails');
add_image_size('sidebar', 278, 156, true);

1行目はテーマで投稿サムネイルを使いますという意味です。

2行目はsidebarという名前で画像のサイズを追加してねという意味で、この行を追加することで幅278px、高さ156pxの画像がアップロード時に自動的に生成されるようになります。

記事内にショートコードを挿入する。

以下のような感じのショートコードを記事内に入力してください。

[list_subpages thumbnail="sidebar"]

thumbnailという引数の値は、前述したadd_image_size()で指定したサイズの名前です。

WordPressにはデフォルトで、thumbnailとかpost-thumbnailとかmediumなどがあります。

CSSをゴリゴリ書く

CSSは好みに合わせて。

冒頭で紹介したサイトでは以下のようなCSSを使用しています。

.list_subpages.sidebar .post
{
    overflow: hidden;
    float: left;
    width: 298px;
    margin: 10px;
    border: 1px solid #dedede;
    background-image: url(img/bg-white.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    border-radius: 5px;
}

.list_subpages.sidebar .post_thumb a
{
    display: block;
    width: 278px;
    margin: 10px;
}

.list_subpages.sidebar .post_content
{
    padding: 10px;
}

.list_subpages.sidebar .post_content h4
{
    font-weight: bolder;
    margin-bottom: 0px !important;
}

.list_subpages.sidebar .post_content .post_excerpt
{
    font-size: 12px;
    line-height: 18px;
    margin-top: 10px;
}

まとめ

このテクニックを使用すると以下のようなメリットがあります。

  • 子ページの追加や編集だけで親ページ側にも反映されるのでメンテナンスが楽ちん。
  • CSSと組み合わせて複数カラムに対応できる。