ワードプレスSWELLのデメリットとメリット!どっちCocoonとの違いと比較

SWELLのデメリットをツラツラを書いていこうと思います。でも、全部解決策も含めて提示していきます。

改善してくれたら嬉しいけど、もう解決しているため別に個人的にどっちでもいいかもしれません。

ワードプレスSWELLのデメリット

カテゴリ別人気記事がない

雑記ブログで必須のカテゴリ別人気記事がないことです。何なら人気記事はいらないけど、カテゴリ別人気記事は必要です。でも、ithandではカテゴリ別人気記事を表示しています。

そうです、funcitons.phpをカスタマイズしたのです。

WordPressのウィジェットは、WordpressのWP_Widget classから継承して作られるのが一般的です。

SWELLのウィジェットもその流儀に従っています。

ウィジェットを機能拡張したい場合は、継承して機能追加した後に、オリジナルを置き換えればいいです。

https://vhcinfo.org/swell-706/

忙しかったときにだいたいこちらのコードをお借りして何とかなりました。こちらの記事はありがたかったですね。ココナラで出店している元大手のエンジニアさんのようですね。

ただし、カテゴリわけで、親カテゴリーと子カテゴリーと紐づけたい場合は注意が必要です。カテゴリ別人気記事の表示が全般的におかしくなります。カテゴリの親子関係には対応していないようです。

サイドバーをカテゴリごとに表示・非表示する機能がない

cocoonにはサイドバーをカテゴリごとに表示・非表示する機能があります。

でも、SWELLにはありません。こちらはプラグインを使うと改善できますから問題ありません。

表が使いにくい!?

背景に○や×、?などを入れられる機能がありますけど、ちょっと使いにくいのですよね。

なぜならコピペができないから!

個人的に普通に○を書いて色を変える方が楽ですね。コピペできるから!

ストライプと線を一緒に適応したいのですが、一緒に適応することができないようです。まあ、CSSをかいて[高度な設定]をすればいいのですけど!ただ、上書きがうまくいかない部分もあり、少し面倒だったのです。

/***************
 * テーブル
 ***************/

.table-design-for-swell {
    border-collapse: collapse;
}

.table-design-for-swell thead {
    border-bottom: 3px solid #434343;
}

/*
.table-design-for-swell th, .table-design-for-swell td {
    border: 5px solid #323232 !important;
}
*/

.table-design-for-swell tbody tr:nth-child(odd) {
    background-color: #f5f5f5;
}

cocoonと比較すると、バッチ機能がなさそうです。

サムネイルのサイズが正方形にならない

正方形の設定はあります。

たとえば、人気記事のサムネイルは正方形にしても、画像のURLをみると長方形なんです。結構大きな長方形のため、高速化の観点からは用意した正方形の画像を使いたいですかね。

【解決済】更新日順に並べ替えができない

設定になかったので、functions.phpに追記する必要があります。

/**
 * 更新日順にソート
 * is_main_queryはトップページ、カテゴリページ、アーカイブページ(タグや年月など)
 */
function custom_order_by_modified($query) {
    if (!is_admin() && $query->is_main_query()) {
        $query->set('orderby', 'modified'); // 更新日でソート
        $query->set('order', 'DESC');       // 降順(新しい順)
    }
}
add_action('pre_get_posts', 'custom_order_by_modified');

なお、Cocoonは基本機能でできます。

投稿日がSEOに表示される

デザインの都合で「タイトル横に日付を表示する」のチェックを外しました。

その状態で「タイトル下に公開日を表示する」と「タイトル下に更新日を表示する」のチェックを入れます。そうすると公開日の方がGoogleに通知されてしまいましたね。SEO上よくないですかね。

この問題は解決策があるのかもしれませんが、とりあえず更新日のみ表示するように切り替えました。

スポンサーリンク

ワードプレスSWELLメリット

高速化など…メリットまとめ

他にもメリットはたくさんあります。詳しくはこちらの記事をみてください。

ブログカードを張るとき検索できる

ブログカードを張るとき検索できるのは何気に便利です。IDを調べるみたいなことはやりたくありません。

カラーが指定できる

カラーチャートが作れますね。よいと思います。

スポンサーリンク

どっち!?SWELLとCocoonとの違いと比較

WordPressのテーマは途中で乗り換えるのは面倒なので、最初から決めることが大事です。

  • Swellは対応が早めです。
  • SwellはUIも使いやすいです。
  • Swellの方は最初からデザインが整っています。デザインができる人はCocoonでもOKですが、Swellの方が楽です。
  • Swellの方が色の設定ができます。カスタム書籍などの設定もあります。反面、CocoonはCSSでなんとかしようとなってしまいます。
  • Cocconのメリットはカテゴリ別人気記事があることです。
  • Cocconのメリットはウィジェットの表示・非表示がカテゴリごとにできることです。

swellとcocoonの違い(pagespeed)

この方、Cocconの値が悪すぎですね。古いサイトは長く運営していると他に原因がある場合があります。検証したところ、Cocoonもそれほど悪くはありませんでした。個人的には大差ないという結論です。

パフォーマンス(デスクトップ)パフォーマンス(モバイル)備考
ebookbrain(Coccon)896210年以上運営調整前
ithandsサーバー部(Coocon)9773新規
ithands(Swell)99(100)64(65)新規
括弧の値は、Swellはキャッシュと遅延読み込み設定をオンにした

swellとcocoonの違い(gtmetrix)

gtmetrixはswellの方が値がよかったですね。

スポンサーリンク

WordPress6.5のフォントライブラリはSWELLとCocoonで使えない

WordPress6.5からフォントライブラリに対応しました。しかし、エディタというメニューがないのです。

テーマの対応が必要なのでしょうね。

公式テーマの Twenty Twenty-Four にすると、使えます。

Google Fontsなどのアップロード手順は次のとおりです。

外観 > エディター > スタイル > スタイルの編集 > フォントを管理 > アップロード(もしくは「フォントをインストール」)

スポンサーリンク

SWELLとCocoonのサムネイルのサイズ

Swellは次のとおりです。

  • メディア設定の画像(人気記事の画像は正方形にしたいため120*120にしました。それ以外は0で)
  • -768×432.png
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする