SWELLテーマに関して

Cat WEBサイト構築Tag by cubismer

WordPressのリニューアル案件で初めてSWELLを使ったのでメモとして。

テーマ選定

理由は複数ありますが主に以下3点からSWELLを選びました。

  • シェアが大きいようなので、安定性や継続性などの安心感がある
  • テーマ内蔵ブロックで基本的なことができ、あとはCSSでどうにかできそう
  • クライアントの直接契約により、1ライセンスでクライアントサイトの本番と開発の2つの環境で使用できる

継続性

テーマのサポートが永遠に続くことはあり得ないものの継続性を考えることは重要です。
シェアが大きいと撤退時に色々と考えていただけるのでは、という期待感が他よりも少しは多く持てます。

Cocoon

Cocoonテーマをより継続的な事業にしたかったからです。Cocoonテーマ開発は、これまでほぼ私一人で行ってきました。しかし私も一人の人間です。突然病気になったり事故に遭う可能性も当然あります。しかし、エックスサーバー社に事業を譲渡することで、今後より多くの人が開発にも関わり、安定的にCocoonテーマ事業を継続することができるようになり、それがよりユーザーさんの利益になると考えました。

調べた範囲では、上記のように判断して実際に動いたCocoonが最も継続性が高いように思われました。
他のテーマでこのようなことを実行されているテーマが見つけられませんでした。

しかし今回はブログメインではなく、Cocoonの使用経験からブロックの不足も懸念されたので除外しました。

他方Xserver自身がWPのテーマを開発しており、さすがに邪推だとは思いますがこちらに吸収される可能性が少しちらつき不安感があったのも除外理由でした。

テーマ内蔵ブロック

実際には後付けの理由になりますが、以下のブロックと機能は汎用性が高く魅力的なポイントでした。

  • リッチカラムブロック
  • [HTML]ショートコード
  • ブログパーツ

リッチカラムブロックは3サイズに対応できるので、微妙なサイズでレイアウトを調整したい時に役立ちました。

[HTML]ショートコードは色々な入力欄で使用でき、HTMLとCSSで構築するスキルがあれば色々作れる印象です。
WPの仕様上仕方ないと思うものの改行を自動整形されてしまう点は少々困りましたが、致命的ではなく利便性が勝ります。

ブログパーツは同期パターン(旧再利用ブロック)を使えば不要と言えるかもしれませんが、以下の点でブログパーツの方が利便性が高いと感じました。

  • 必ず同期状態である(操作ミスで同期が切れたりしない)
  • ショートコードで色々な入力欄に埋め込める

ライセンス

調べた範囲では、Cocoon以外の日本製の有料テーマは「1サイト=1ライセンス」のようでした。
通常は開発と本番の2環境に同じテーマを入れて対応すると思いますが、このために2ライセンス契約は少々厳しい印象です。
SWELLは1ライセンスで対応可能であり、気軽に開発環境を増やすことを検討きるほどにハードルが低く感じます。

他にも、買い切りではなくサブスクリプション型の有料テーマは提案しづらい印象があり、SWELLの買い切り型の方が選びやすかったです。

カスタマイズ時のメモ

カスタマイズした際に検討した内容などを記載しますが、使用したバージョンに限定されるため汎用的な内容ではない点に留意ください。

TOPページのヘッダー

メインビジュアルの上に重ねるのではなく、メインビジュアルに重ねず直上にヘッダーを配置したかったのですが、設定で解決する方法が見つけられずCSSで対処しました。

サイドバー

ページごとにサイドバーを変更したい場合、調べた範囲ではCSSで非表示にするしかないようでした。
テーマファイルの編集のほか、探せばフックがあったかもしれませんが、いずれも運用時に面倒な作業が増えそうなので、やはりCSSでの対応としました。

なお多少イレギュラーな方法ですが、以下のようにすれば階層構造に従って簡易にサイドバーの表示切り替えが可能です。
この方法であれば、ページの新規追加時にコードをさわることなく意図した状態でサイドバーを表示できます。


/*
固定ページで以下の解像構造を持っており、それぞれの親に合わせて親自身と子のサイドバーを切り替える。
foo
- foo-child-1
- foo-child-2
bar
- bar-child-1
- bar-child-1
具体的には、fooとfoo-child-1とfoo-child-2には、sidebar-fooを、barとbar-child-1とbar-child-2には、sidebar-barを表示。
前提として、それぞれのサイドバーのラッパー要素に固有のid(#sidebar-fooや#sidebar-bar)を設定する
*/
html:not(:has(link[rel="canonical"][href*="/foo/"])) #sidebar-foo {
    display: none;
}
html:not(:has(link[rel="canonical"][href*="/bar/"])) #sidebar-bar {
    display: none;
}

canonicalタグの値と:notと:hasを利用した方法であり、やや力技感はありますが親子関係を前提とした処理としてはそれなりに汎用性があるかと思います。

コメント欄非表示

設定方法に問題があるのかもしれませんが以下の状態にしてもコメント欄が消えませんでした。

  • 「設定 > ディスカッション」の「新しい投稿へのコメントを許可」が未チェック
  • 「外観 > カスタマイズ > 投稿・固定ページ > 記事下エリア > コメントエリアの設定」にある「コメントエリアを表示」が未チェック

そのためfunctions.phpに以下を書いて対応しました。


add_filter( 'comments_open', '__return_false' );

モバイルの文字サイズ

画面際時に応じて文字サイズが変化する機能が以下の操作でもOFFにできませんでした。

  • 「外観 > カスタマイズ > サイト全体設定 > 基本設定 > フォント設定」の「フォントサイズ(Mobile)」を「固定サイズ: 中」で設定

やむなくCSSで指定を上書きして対応しました。

なお、個人的にはこの画面幅に応じたclampを用いる可変フォントサイズには否定的です。
制作側としては便利で使いたいと思える反面、ユーザーにメリットがなく必要性が薄いのではと思います。
他方リードコピーなどの特定箇所においては、改行などの見た目をコントロールするための方法の一つとして有効な場合もあるとは思います。

結び

特に強い不満点はなく、SWELLを選んだのは正解だったと考えています。

今回は突貫作業のため浅い調査に基づき無理やり解決した問題がありますが、本来はいずれも設定で対応できるはずであり、この点は気になりますが。
ともあれ多少のWPとCSSの知識があれば対応方法を複数思いける程度の状況なので、とりあえずは良しとしています。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄