CMS構築を目的にPHPをベースとしたWordPress、CakePHPやPEARなどオープンソースを中心に解説しています

WordPressカスタムフィールドプラグインの決定版「Advanced Custom Fields」(ACF)のご紹介です。

最近では開発コストの面からCMSをスクラッチでゼロから開発する事も少なくなりました。
一方で既存のフレームワークやCMSをカスタマイズする事が多くなってきたのですが、その中でもWordPressをベースにした案件が多いです。

WordPressを改造するにあたり、必須となるのが「カスタムフィールド」。今回はACFの導入方法とそのメリットについて検討します。

ACF { Advanced Custom Fields Plugin for WordPress

WordPressを含め、ブログサイトにソーシャルボタンは欠かせないツールとなりました。

メジャーなSNSボタンにはTwitter、はてなブックマーク、Facebook、Googleプラス、mixiなどのサービスがありますが、これらの技術仕様は全て異なるので、複数のボタンをブログに設置するにはそれなりの労力を必要とします。また、その機能は日々進化しており、予期なく仕様が変更されることもあるので、その管理は大変です。

そこで、これらの管理を一括できるWordPressのプラグインを探していたらありました。

「WP Social Bookmarking Light」
このプラグインを利用することで、先に述べたSNSボタンの他、数十種類ものサービスを管理画面から一元管理できます。

WordPressで作成したブログで、簡単に記事の一覧を出力したい、つまり、簡単にサイトマップページを作成したいと思い、調べていました。

ある程度PHPをプログラミングできるので、初めはオリジナルでプラグインを作成してみようかとも考えていましたが、調べている中でとても便利なプラグインを見つけました。

「PS Auto Sitemap」
このプラグインをインストールすることで、簡単にサイトマップページを作成することができます。

WordPressには、テーマの管理画面からサイドメニューなどのウィジェットを操作できる機能があります。

HTMLやPHPなどWPソースを調整できない方には、ブラウザを通して管理画面からある程度ウィジェットをカスタマイズできるので便利な機能です。但し、そこから自動生成される各々のウィジェットのHTMLコードは、自由にカスタマイズするには都合が悪く、私の場合はその機能を停止していました。

ここで、Webの世界に入ってある程度CSSでのレイアウト力も身に付きましたし、今一度ウィジェット機能の仕様を見直してみて、活用できないか試してみます。

楽天RMSでページを構築する際に、ページ内リンク(アンカータグ)を貼る方法です。

Webサイトでのページ内リンク

通常、Webサイトを構築する中で、ページ内リンクを貼る場合は、以下のようにします。

<a href="#section1">ページ内リンクです</a>

このリンクをクリックすると、ページ内の以下の場所までジャンプしますね。

<div id="section1">
こんてんつ
</div>

ここで、楽天RMSで上のような実装をすると、リンクをクリックした時にエラーページへと遷移してしまいます。
これは、楽天RMSが外部へのリンクを全面禁止しており、「#section1」を外部リンクとして扱っしまっているのが原因のようです。
つまりリンクをクリックした時に、「#section1」は外部サイトなのでエラーです、といった趣旨のエラーページが表示されてしまうわけです。

RMS(Rakuten Merchant Server)は、いわゆる楽天のショッピングサイトを管理する機能、サービスです。
RMSを利用して商品の管理・販売はもちろん、サイトの構成やデザインを調整することができます。しかし、利用できるWeb技術の制約もあり、構築作業はなかなか一筋縄ではいきません。

さて、最近のWebサイトではボタン画像のマウスオーバーやスライドショーなどJSを活用して構築するのが一般的です。
しかし、RMSでは制約でJavaScriptが使用できません。正確には、RMSではデザイン構成する方法としてHTMLを流し込めるエリアがあるのですが、そこでいくつかののタグが使用禁止とされています。その中でJavaScriptを記述するエリアの「script」タグも禁止なのです。その他にも外部ファイルの読み込みが禁止なので、「.css」や「.js」などのインクルードも不可能です。
つまり、楽天RMSのみではJavaScriptを使用したWebサイトの構築ができないわけです。

WordPressのテーマはさまざまなテンプレートで構成されており、そのファイル名には一定のルールがあります。
例えば、「header.php」は関数「get_header()」、「sidebar.php」は関数「get_sidebar()」を実行すると読み込みます。

では、自作のテンプレートを読み込む場合ですが、例えば「original.php」というテンプレートを作成したら、関数「get_template_part」を使用して以下のようにして組み込むことができます。

get_template_part('original');

WordPressで投稿した記事をRSSフィードで配信することができます。
例えばこのブログだと以下のリンクからフィードを取得することができます。
http://cms.helog.jp/feed/

このフィードのテンプレートを修正しようと思ったのですが、なんとWordpressはデフォルトでフィードのテンプレートが存在しません。

例えばRSS2をフォーマットを編集する場合、直接インクルードファイルを編集すればカスタマイズは可能のようです。

.../wp-include/feed-rss2.php

しかし、アップデートの際の影響も考慮して、ここではなるべくテンプレート内でカスタマイズを完結したいので、以下のサイトを参考にフィードをテンプレート化します。

長いことブログを運用していると、これまでに投稿した全ての記事に一括置換をかけたいという場面に遭遇することがあります。

例えば、デザイン・構造の変更に伴い記事内に記述した「h2」タグを「h3」に置換したい。

<h2>サブタイトル</h2>
<h3>サブタイトル</h3>

また、html5化に伴いclass指定していた箇所を、新タグに置換したい。

<div class="section">
・・・
</div>
<section>
・・・
</section>

初めは、WordpressのDBを直接書き換えようと考えSQLを書いてみたのですが、なかなか複雑で、簡単にはできそうにありません。

WordPressで固定ページを作成した場合、「page.php」というテンプレートファイルが読み込まれ、ページが生成されます。
但し、サイトを運営する上で「このページだけレイアウトを変えたい」といった要望もでてきます。
WordPressではそのようなときにオリジナルテンプレートを作成できるしくみが用意されています。

方法は簡単です。

例えば、オリジナルテンプレートファイル「page-original.php」を新規作成します。
「original」の部分は任意です。ソースの中身はデフォルトの固定ページテンプレート「page.php」をベースとすると開発作業が楽でしょう。

「page-original.php」を開き、以下のようにコメントでテンプレート名を記述します。この場合テンプレート名は「original template page」になります。後は好みのレイアウトになるようにソースを調整します。

<?php
/* Template Name: original template page */

(ソースは省略)

?>

準備は以上です。
管理画面にアクセスし、固定ページを編集すると、右の「ページ属性」の部分からテンプレートが選択できるようになっているはずです。
original-page-template

テンプレートを選択することで、そのソースを元にページが生成されます。

この技術を使いこなすことで、Wordpressをブログツールのみならず、本格CMSとして活用することができるでしょう。

Monthly Archives

Search