Swellとは
“Swell”は、WordPressテーマの一つであり、多くのカスタマイズオプションと高度な機能を提供することが一般的です。日本製のテーマとしても知られており、特にマーケティングに力を入れている企業や個人ブロガーによく使用されます。
Swellは今、日本で一番人気のあるワードプレステーマです。
主な特徴
- SEO対策: SEOに優れたコード構造と高速なページロード速度を提供します。
- レスポンシブデザイン: モバイルフレンドリーであり、さまざまなデバイスに適応します。
- カスタマイズ性: 豊富なカスタマイズオプションがあり、見た目や機能を容易に変更できます。
- 高度なブロック: Gutenberg対応の高度なブロック要素を多数備えています。
- マーケティング機能: カスタム投稿タイプ、ランディングページ作成、広告設定など、多くのマーケティング機能が組み込まれています。
- アクセス解析: テーマ内でアクセス解析のデータを見ることができる機能も一部のプランで提供されています。
テーマのインストール
Swellのテーマの購入後、Swellのホーム＞ログインします。
必要なファイルのダウンロード
インストール及び初期設定に必要なファイルをダウンロードします。
- Swell本体をダウンロード
- 子テーマをダウンロード
- Cocoon用の乗り換えサポートプラグインのダウンロード（必要な人のみ）
Cocoon乗り換えサポートプラグインのインストール
- 管理画面＞プラグイン＞新規追加＞プラグインのアップロード
- 「ファイルを選択」で、先ほどダウンロードしたCocoon用乗り換えサポートプラグインを選択して「今すぐインストール」をクリック
- インストールが完了したら、「プラグインを有効化」をクリック
- SEO関連データの移行（All in one SEO Packを使用している場合は不要）
Swellテーマのインストール
- 外観＞テーマを選択します。
- 新しいテーマを追加＞テーマのアップロードをクリック
- ダウンロードしたSwellの親テーマのファイルを選択（Zipファイル）
- 今すぐインストールをクリック
- Swellの親テーマのインストール完了（ここでは有効化しない）
- 同様にSwell子テーマのインストール
- Swellの子テーマは有効化します。
Swellのユーザー認証
Swellはユーザー認証をしないと全ての機能が使えません。
- Swellのユーザー認証をクリック
- 会員登録時のメールアドレスを入力
- 「認証リクエストを送信」をクリック
- 5分以内に届いたメールのURLをクリック＞「アクティベートを完了」をクリック
プラグインのインストール
SEO SIMPLE PACK
SEO SIMPLE PACKは、WordPressのウェブサイトにSEO（検索エンジン最適化）対策を実施するためのシンプルなプラグインで、SWELLテーマの開発者によって開発され、SWELL利用者には必須にプラグインで、以下の特徴があります。
SEO SIMPLE PACKはSwellでは、必須のプラグインです。
必ずインストールして下さい。
- SEO SIMPLE PACKは、SEOに必要な基本的なメタタグを自動で出力します。これにより、ウェブページが検索エンジンに適切にインデックスされ、検索結果に適切に表示されるようになります。
- このプラグインは、異なるタイプのページごとに異なるSEO設定を提供します。これにより、各ページの内容に合わせてSEO対策を最適化することができます。
- SEO SIMPLE PACKは国産のプラグインで、シンプルかつ必要な設定を簡単に行えることが強調されています。他の有名なSEOプラグインと比較しても、このプラグインのシンプルさと使いやすさが強調されています。
- FacebookやTwitterなどのSNSプラットフォーム向けにOGP（Open Graph Protocol）情報を設定することができます。これにより、SNS上でのウェブページの表示を最適化することができます。
- SEO SIMPLE PACKは、必要なSEO機能を網羅しており、WordPressの初心者から上級者まで幅広い層のユーザーに対応しています。
Highlighting Code Block
「Highlighting Code Block」は、コードブロックをシンタックスハイライト（構文強調表示）して、記事やページに簡単に追加できるようにするツールで、以下のような特徴が有ります。
- このプラグインは、クリックだけでシンタックスハイライトされるコードブロックを追加できるようにします。これにより、ユーザーは非常に簡単にコードを強調表示して表示できます。
- WordPressの記事内にプログラムのソースコードを埋め込むことができます。これにより、プログラムのコードを美しく、読みやすく表示することができます3。
- ighlighting Code Blockは、多くのプログラミング言語に対応しており、デザイン性も良いとされています。
Code Block Pro
こちらも、上記と同じようなコードエディタですが、上記よりの使いやすいので、私はソースコードではなく、コマンドの1行コマンド等に使用しています。以下のような特徴が有ります。
- このプラグインは、ユーザーにコードエディタを提供し、ユーザーのコードを直接VS Codeエディタと同じレンダリングエンジンを通じて実行できるようにします。これにより、速くてネイティブなコードハイライトを提供し、ユーザーの好きなプログラミング言語で完璧にレンダリングされるコードハイライトが得られます。
- このプラグインは、人気のVS Codeテーマを使用して、美しい構文ハイライトを提供します。
- Highlighting Code Blockとの違いは、標準のCodeからワンクリックで変更可能なところ
- このプラグインは、任意のプログラミング言語でコードハイライトを完璧にレンダリングできるようにします。
- このプラグインはVS Codeエンジンによってコードハイライトが提供され、一部のテストを通過できなかったことが報告されていますが、メモリ使用量には最小の影響しか与えていないとされています。
Customizer Export/Import
Customizer Export/Import”は、WordPressのカスタマイザー設定をエクスポート（出力）またはインポート（取り込み）する機能を提供するプラグインです。以下のポイントが特徴として挙げられます:
- このプラグインは、WordPressカスタマイザーの設定を直接エクスポートまたはインポートできる機能を提供します。この機能は、カスタマイザーインターフェイス内から直接アクセスできるようになります。
- もしもあなたのテーマがWordPressカスタマイザーを設定に使用している場合、このプラグインは非常に便利です。カスタマイザー設定のエクスポートとインポート機能により、任意のテーマやプラグインの設定を簡単に移行することができます。
- このプラグインは、カスタマイザーインターフェイスから直接設定をエクスポートまたはインポートすることができ、この操作は非常に直感的で簡単に行えます。
SiteGuard WP Plugin
“SiteGuard WP Plugin”は、WordPressのセキュリティを強化するためのプラグインで、主にWordPressの管理画面およびログイン画面を保護する機能を提供しています。具体的には、以下の点が強調されています。
- このプラグインは、不正アクセスからWordPressサイトを守るために設計されています。WordPressのログインページと管理ページを保護する機能を備えており、さまざまな種類の攻撃に対するセキュリティを強化することができます。
- WordPressにインストールするだけで、セキュリティを向上させることができるシンプルなセキュリティ対策プラグインであり、特に不正ログインの防止を中心にセキュリティを強化しています。
- SiteGuard WP Pluginは、インストールするだけで利用可能であり、日本語で設定できるため、パソコンやインターネット、WordPressに詳しくない人でも簡単に利用することができます。これは、WordPressの初期設定では第三者の不正ログインに対して非常に弱い状態にあるため、このプラグインの利用は特に重要とされています。
Akismet Anti-Spam
デフォルトでインストールされていると思いますので、有効化しておきましょう。このプラグインは、WordPressおよびWooCommerce向けの信頼されたスパム対策ソリューションであり、サイトのコメントとフォーム送信内容をチェックし、これらをスパムのグローバルデータベースと照合して悪意あるコンテンツの公開を防ぎます。具体的には、以下のような特徴があります:
- Akismet Anti-Spamプラグインは、記事へのスパムコメントを自動で削除する機能を提供します。スパムコメントは放置されるとコンテンツの質が低下し、検索エンジンからの評価も下がってしまうため、このようなスパム対策は必須とされています。
- このプラグインは、コメントとコンタクトフォームの両方に対するスパム保護を提供し、これらをグローバルデータベースと照合して悪意あるコンテンツの公開を防ぎます。これにより、WordPressとWooCommerceのユーザーは、より安全にサイト運営を行うことができます。
- Akismetは、ユーザーに代わってフォームとコメントのスパムをフィルタリングし、ユーザーがより重要な作業に集中できるようにします。
Akismet Anti-Spamの設定方法
Akismet Anti-Spamの設定が若干面倒だったので、下記に記載しておきます。
- 有効化をクリック
- Akismet Anti-Spamアカウントを設定をクリック
- Personalの
Get Personalをクリック - 料金バーを一番左（0円）にします。
- I don’t have ads on my site（私のサイトには広告はありません）にチェック
- I don’t sell products/services on my site（私のサイトで製品/サービスを販売していません）にチェック
- I don’t promote a business on my site（私のサイトでビジネスを宣伝していません）にチェックを入れる
Continue with personal subscriptionをクリック- Enter your billing informationのEmailを入力
- CountryでJapanを選択し、Postal codeに郵便番号を入力
- Organizationには、組織名を入力します（何でもいいと思いますが）
Continue to Paymentをクリック- APIキーを取得したら、
手動でAPIキーを入力の箇所をクリックしてAPIキーを入力します。 APIキーを使って接続するをクリック- 尚、同じEmailでは、再度APIキーを作成できませんので、同じEmailアドレスで、APIキーを取得しているサイトからコピーしてきてください。
WPForms Lite
Contact Form7が有名ですが、”WPForms Lite”もお奨めです。以下のような特徴があります。
- WPForms Liteは、WordPressで簡単にフォームを作成することができるプラグインです。プラグインをインストールすることで、WordPressの「プラグイン」一覧から「設定」を選択し、フォームを作成することができます。
- このプラグインは、非常に使いやすく、初心者にも親しみやすいデザインが提供されています。プラグインの画面で「WPForms」という単語で検索し、インストールと有効化をクリックするだけで利用を開始することができます。
- WPForms Liteは、WordPressリポジトリで400万回以上ダウンロードされ、5つ星の評価を受けています。Contact Form 7プラグインに次いで人気があり、使いやすいフォームビルダープラグインとして強い評判を持っています。
- さらに多くの機能を利用するためには、プロ版へのアップグレードが提供されています。
デモデータのインストール
自分でデザインを一から作るのが面倒な人は、デモデータを利用してカスタマイズしましょう。
- Swellのデモサイト一覧＞好きなデモサイトを選びます
- デモサイトに着せ替えるためのデータをクリック＞上記で選んだデモデータをダウンロード
- 外観＞カスタマイズ
- 「カスタマイズ」画面が開いたら一番下の方にある「Export/Import」項目を開きます
- インポートのファイルを選択をクリック
- 解凍したswell_demo.datファイルを選択＞インストール
- 画像ファイルのダウンロードはお好みで（今回はチェックをはずしたまま）
WordPressの設定
一般設定
このフィールドには、ウェブサイトの名前を入力します。これは、ウェブサイトのヘッダー、タイトルバー、およびSEOで使用されます。
このフィールドには、ウェブサイトの名前を入力します。これは、ウェブサイトのヘッダー、タイトルバー、およびSEOで使用されます。
これらのフィールドには、ウェブサイトのURLを入力します。ほとんどの場合デフォルトでいいと思います。
このフィールドには、ウェブサイトの管理者のメールアドレスを入力します。WordPressは、このアドレスに重要な通知を送信します。
このオプションを選択すると、ユーザーは自分でアカウントを作成できるようになります。
新しいユーザーに付与するデフォルトのロールを選択します（たとえば、購読者、貢献者、著者など）。
ほとんどの場合、ここはいじる必要が無いと思います。
日付形式もデフォルトでいいと思いますが、好みで変更してください。
週の開始日を選択します。ここもデフォルトでいいと思います。
パーマリンク設定
デフォルトのままの日付と構造でもいいのですが、私は、カスタム構造の%postname%と%category%を選択する形に変更しました。
但しこの場合は、投稿時にURLスラッグをアルファベット（英文）に変える必要がありますので、注意が必要です。
SWELL設定
高速化
高速化タグには、ページ表示速度を格段に速くする機能がついています。
基本的に全てにチェックを入れても大丈夫だと思います。
ここの項目は特に変更しなくても大丈夫だと思います。
記事下コンテンツを遅延読み込みさせるにチェックを入れた方が、ページの読込速度はあがります。
画像のLazyLoadはスクリプトのままで大丈夫です。
Prefechを選択しておけば大丈夫だと思います。
機能停止
機能停止タグには、デフォルトで設定されている機能を停止するための項目です。
「ページ表示時のアニメーションを停止する」と「投稿画像をクリックで拡大表示する機能」は停止しておいた方がいいと思います。
画像を拡大したいときは、自分で拡大表示するでしょうし、画像に触れるたびに拡大されるのはユーザービリティ的にうざいと思います。
デフォルトでは、チェックが入っていないと思いますが、「セルフピンバックを停止する」にはチェックを入れておいてください。
以上で、Swellの基本的な初期設定は完了です。
コメント