WordPress CMSサイト – 固定ページの配列表示

マガジンスタイルCMSサイトでは、 固定ページ横分割の配列表示が大きな役割を果たしてくれます。本CMSサイトは、その機能ボタンをTinyMCE Advancedのメニューに組込み済みです。なお、本CMSサイト組込みの日本語化は弊社によっています。

◇マニュアル
本ページは、下記CMSサイトのマニュアルを兼ねています。

テーマGenesisの固定ページ配列表示

WordPressのコンテンツ編集は、プラグインTinyMCE Advancedが定番です。本CMSサイトも組込み済みです。そのTinyMCE Advancedは、WordPress既定エディタTinyMCEの機能拡張プラグインです。ただし配列まではサポートしておらず、CSS Class指定によります。HTML指定と変らないのでCMS編集には馴染みません。

そこで、本CMSサイトで組込み済みテーマGenesisです。GenesisではCSS column classesでサポートされています。素晴らしいCMS機能ですが、やや専門的です。また、配列パターンが限られています。

CMSサイトの固定ページ配列

本CMSサイトの配列は、プラグインGenesis Columns Advancedによっています。

Genesis Columns Advancedのネーミングは、TinyMCE Advancedの関係と似ています。ネーミングの通り、Genesisカラム配列強化のCMS機能拡張です。CMS ECサイトでは、手軽に行える商品配列がニーズです。先ず、その配列表示を見ておきます。商品が書籍の、サイト幅いっぱいのフルスクリーンの例です。レイアウトは、関連トピックス1に記載があります。

この画面のカラム配列は、2箇所で行っています。

1. 下方の6カラム配列
下方の書籍6列が、6カラム配列による商品表示です。フルスクリーンとマッチします。

2. 中央のカラム応用配列
中央部は、フルスクリーンのテキスト表示幅を狭めて見易く整えています。こちらは、2/3幅の配列によっています。

Genesis Columns Advancedのカラム配列

では、そのGenesis Columns Advanced入門から始めます。TinyMCE Advancedの、右ボタンをクリックした状態です。最右アイコンのクリックで、「2カラム～6カラム etc」の表示が見えます。左側は、6カラムの選択で固定ページへ書き込まれた様子です。

6カラム配列なので、書込みも6行です。改行分解すると、次の内訳です。なお、ショートコード4行の前後は本来は[]です。これを、仮の()へ変更標記しています。

上記の、均等6分割プレビュー表示です。このように、カラム配列を確認できます。

ここでは、カラム1～カラム6のテキストをダイレクトに表示しています。実際は、先程の画面事例のようにコンテンツ情報をここへ入力する形となります。

フリーレｲアイウト

以上では、均等分割の配列指定を見てきました。フリーレイアウトとは、フリー分割指定です。上のメニューの下から2番目の、フリーレイアウト選択で表示される画面です。

なお、中には機能しない配列も散見されます。次回以降の機能アップデートは待つことにしましょう。

上の画面では、初期画面では複数カラムのレイアウトがミックス状態です。そこで、意図するカラム数を選択してみましょう。下の画面は、2カラム選択の表示例です。

この画面では表示されていませんが、右上のカラム割合表示をクリックするとカラム幅の割合が表示されます。そして、意図するレイアウトをクリックすると先ほどのようなショートコード情報が固定ページへ書き込まれます。

ショートコード

以上ではTinyMCE Advancedでの、代表的はボタン操作を見てきました。ボタン操作は、ショートコード情報を知るのが目的と考える方がよさそうです。ショートコードは、CMS配列に適したとてもシンプルなコードです。そのショートコードを、Excel原稿書き込みが推奨されます。なお、ショートコード習熟は実例で慣れる方が早いです。また、固定ページのプレビューとExcel原稿対比もお奨めです。

固定ページExcel原稿のサンプルはありますか。

このスクリーンショットは、固定ページExcel原稿のサンプルです。ページ先頭の、6列書籍画像の配列です。iPhone画像から原稿との関係が分かります。
６カラム配列の、先頭2書籍の抜粋です。赤文字の4行が、ショートコードです。固定ページ制作では、ショートコードを含む丸ごとのコピペで大部分が完成します。Genesis Columns Advancedだから可能な、Excel原稿ベースでのページデザインです。

企業CMSサイトでは、このような原稿ベースの的確な制作管理が望まれます。ページの品質管理に加えて、省力化にも寄与します。そして、Excel原稿更新によるアップデートもスムースに進みます。

CMSサイトの、主なカラム配列を示してください。

下表が主なカラム配列です。先頭行の5/6の部分が、実際のコンテンツ領域です。このため、この中で「1/2 + 1/2、1/3 + 1/3 + 1/3 etc」が入れ子となるケースも多くあります。

TinyMCE Advancedフォーマット指定で表示が乱れます。

ショートコードの後にTinyMCE Advancedフォーマット指定を行うと、表示が乱れるようです。この解消法です。

左のad21bが、CSSのフォーマット指定です。その手前の赤枠ショートコードのclearfixで、手前までのショートコード指定をリセットする形です。

関連トピックス

本ページに関連する、トピックスです。