ここ最近、フッターのカスタマイズに導入した「Shortcodes Ultimate」というプラグインが便利だったので紹介します。
Shortcodes Ultimateとは
Webサイトをカスタマイズするための、より高度なcss記述が引用できるプラグインで、Wordpressのエディター画面に存在するデフォルトのタグと同じように利用できます。
試しにいくつかShortcodes Ultimateに搭載されているコードを引用して、いくつか例を表示してみました。
（サンプルとして作成）
こんな感じで、自分でCSSやPHPファイルを編集するための十分な知識が無くても、こういった設定・表示が導入できるようになります。
知識のある場合には不要かもしれませんが、WEBサイト運営経験が低い場合には、役に立ってくれる機能です。
Shortcodes Ultimateの「行」の機能がおすすめ
例えば、ずっと1列で記事を書いてきたものの、ある部分だけ3列にしてまたすぐに1列に戻したいといったときや、画像を簡単に並列表記にしたいといったとき、Shortcodes Ultimateを使うことで簡単に実現可能です。
記事編集画面のショートコードを挿入より、「行」というコードを選択して挿入するだけで、簡単に3列表示のテンプレートが導入できます。
文字や画像を入れると以下のようになります。
テスト作成
3列表示の例です
テスト表示用画像
また設定を少し変更すれば4列や5列といった活用も可能です。
画像を並列で表記しようとした場合、他のコードでは注意していないと、大きさがオーバーして2段になってしまうことも多かったように思いますが、Shortcodes Ultimateのショートコードでは、列の広さに合わせて縮小することが可能なので、割と利用しやすい印象です。
賢威7での3列、4列フッターへ活用
本文中でももちろん活躍しますが、導入の一番の目的はこのサイトのテンプレートである賢威7のフッターをカスタマイズすることでした。
写真が暫定ながら完成形です。
CSSの編集などがうまくいかなかったので、いろいろと解決策を調べている中で、Shortcodes Ultimateのプラグインに出会ったので試してみました。
賢威7はテーマ編集不要でフッターカスタマイズ可能
賢威7の場合、ダッシュボード→賢威の設定→フッターとアクセスし、自由記述欄に先ほどのショートタグを記入することで簡単にレスポンシブデザイン対応の3列表示のフッターの枠組みが完成します。
facebookやtwitter画面、カテゴリーなどを表示させるだけであれば3列でも十分です。
地図や動画、メニューなどもShortcodes Ultimateを活用して挿入できるので、うまく組み合わせて活用すると良いでしょう。
自身はカテゴリー表示に関してもShortcodes Ultimateから挿入しています。
4列化表示はコードの軽微な修正で対応可能
基本のフォーマットだと3行となってしまうため、4列にしたい場合にはショートコードの修正で対応可能です。
元々のコード(3列表示)
[su_row][su_column size="1/3"]コンテンツ[/su_column] [su_column size="1/3"]コンテンツ[/su_column] [su_column size="1/3"]コンテンツ[/su_column][/su_row]修正後のコード(4列表示)
[su_row][su_column size="1/4"]コンテンツ[/su_column] [su_column size="1/4"]コンテンツ[/su_column] [su_column size="1/4"]コンテンツ[/su_column] [su_column size="1/4"]コンテンツ[/su_column][/su_row]赤字の部分を追加・修正することで、均等間隔の4列表示になりました。
コンテンツの広さが均等で十分であればこのまま、仕上げればOKです。
各列の幅もCSSの編集で調整可能
このサイトの場合、4列表示を有効活用するため、4列表示は変わらないものの、各コンテンツの間隔を調整し、よりフッターエリアが広く使えるように若干カスタマイズしました。
既存のコードはショートコード→カスタムCSS→box-shortcodes.css(列表示の場合)と進めば確認可能です。
同じ画面よりCSS編集ができるようでしたが、操作が無事に反映されるか不安だったので、CSSファイルを保管しているサーバー経由で編集しました。
格納場所は「使用ドメイン/public_html/wp-content/plugins/shortcodes-ultimate/assets/css/box-shortcodes.css」となっています。
最終的に、マージン幅を4%→1.5%に修正したり、各カラム1/4や1/3となっている項目の広さを調整したり、自身の場合はカスタマイズに合うように、.su-column-size-27-100 { width: 27.0%; }というカラム幅を作成し、[su_column size="27/100"]と表記して活用しています。
トータルの広さが100%を超えなければレスポンシブでスマホ用表示となるまで4列状態を維持してくれます。
まとめ
Shortcodes Ultimateというワードプレス用プラグインを導入、使用することにより、記事やデザインを装飾することが可能です。
中でもお勧めは列（カラム）表示で、レスポンシブデザインにも対応していて使い勝手が良いと感じます。
今回は賢威7テンプレートのフッター作成のために導入しましたが、他者との差別化のため、フッターカスタマイズに限らず上手にショートコードを活用してみてはいかがでしょうか。
