SWELLテーマを購入したことと、このサイトで行った設定内容について

2020 1/01
目次

JINテーマからSWELLテーマに乗り換え!

以前は JINテーマ を使用していましたが、ブロックエディターへの積極的な対応とデザインが気に入りまして、SWELLのテーマ を購入しました。

画像
SWELLテーマについてはこちらから!正直おすすめのテーマです。

それで、ようやく自分のこのサイトで「それなり」のデザインにできたので、実際にこのサイトで行った設定内容を一式公開してみます。

SWELLのテーマを導入して感じたことが、下記のたにぐちさんが仰っているように、まさに「最初に結構準備してくれているのが SWELL」という感じです。

実際に、テーマ開発者の了さんが2019年11月に開催された 今日から始める!ブロックエディター入門講座【WordPress】 の会場でも、私が「SWELLテーマは導入した当初のデフォルトの状態が、テーマを見て感じたイメージ通りになっていてスタートしやすい」という趣旨のことを発言しました。

上記ツイートのようにたにぐちさんが仰るように、SWELLではその枠にはめていけば簡単にブログが作成できます。
しかし、SWELLテーマのポテンシャルはそれだけではなくて、もちろん工夫をしていけば様々なカスタマイズも可能となるかと思います。
(それに関しては、後々に実践してやり方等もこのサイトで公開していきたいと思います)

それでは、私が実際にやった設定内容を見ていきましょう!

※特に難しい内容は入れていません。どれも簡単な内容ばかりです。

導入したプラグイン

とりあえず入れたプラグインです。後で増やす予定です。

SWELLでの推奨・非推奨プラグインについては、こちら でテーマ開発者の了さんが直接解説されています。

おすすめプラグイン

  • Easy Table of Contents(目次を生成します) これは不要でした(すみません)。訂正します。
  • Google XML Sitemaps
  • WP Multibyte Patch
  • Really Simple SSL
  • SiteGuard WP Plugin
  • Google Analytics Dashboard for WP (GADWP)

了さん開発のプラグイン(こちらも超おすすめ!)

  • SEO SIMPLE PACK
  • Highlighting Code Block

問い合わせ対応系プラグイン

  • Contact Form 7
  • Flamingo
  • Gmail SMTPまたは、WP Mail SMTP by WPForms(※後日設定します)

テーマ→カスタマイズ

  • サイト基本設定
  • メインビジュアル設定(スライド1のみ設定)
  • [TOP]記事スライダー設定から、記事スライダーを一旦「表示しない」に設定(※記事が少ないときだけ。記事が増えてきたら、「表示する」に変更予定です。)
  • SNS設定

メニュー設定

とりあえず、「グローバルナビ」と「フッターメニュー」だけ設定しました。

ウィジェット

SWELLテーマ公式サイトの右上「購入する」ボタンのように「Send Message」ボタンを設置したかったので、ヘッダー内部にカスタムHTMLで下記のコードを追加しました(PCのみ表示対応)

SWELLテーマで使用できるアイコンは、こちら を参照しました。

※ヘッダー右側に「Send Message」ボタン部分は、この記述だとVer. 1.3.6まで対応。
後に1.3.7以降の内容に更新予定なのでお楽しみに…!

<div class="mv_btn btn_n"><a href="/contact/" class="btn_text"><i class="icon-envelope"></i> Send Message</a></div>

また、Facebookメッセンジャーでのチャット機能を実装したかったので、共通サイドバーにカスタムHTMLで下記のコードを追加しました。

<!-- Load Facebook SDK for JavaScript -->
      <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v5.0'
          });
        };

        (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = 'https://connect.facebook.net/ja_JP/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

      <!-- Your customer chat code -->
      <div class="fb-customerchat"
        attribution=setup_tool
        page_id="111502356887362"
  logged_in_greeting="Hi! How can we help you?"
  logged_out_greeting="Hi! How can we help you?">
      </div>

上記のようなFacebookメッセンジャー用のコードは、Facebookページ→設定→メッセージ→ウェブサイトにMessangerを追加→「利用を開始」より設定・取得することができます。

追加CSS(CSSカスタマイズ)

デザイン調整のため、下記のCSSを追記しました。

特に、サイトのタイトルのデザインカスタマイズについては、タイトルの前に画像を付けたかったので(タイトルの文字だけクリックできて画像はクリックはできません)。

※ヘッダー右側にCTAボタン部分は、この記述だとVer. 1.3.6まで対応。
後に1.3.7以降の内容に更新予定なのでお楽しみに…!

/*ヘッダー右側にCTAボタンを付ける*/
.head_inner .mv_btn{
	margin: 0;
}
.head_inner .mv_btn .btn_text{
	 padding: .5em 1.5em;
	 text-decoration: none;
}

/*サイトのタイトルのデザインカスタマイズ*/
.head_logo{
	line-height:1.4;
	position:relative;
	padding:16px 16px 16px 48px;
	background:url(https://tecchan.jp/wp-content/uploads/2019/12/moe_maru60.png) no-repeat left center/auto 40px
}

/*トップへ戻るボタンを非表示*/
#pagetop {
  display:none;
}

ユーザー→あなたのプロフィール

  • SNS情報(URL)を追加します。
  • プロフィール情報を記述します。

ここに記述した情報は、ブログ投稿時の著者情報(この記事を書いた人)として表示されます。

Contact Form 7の設定変更

下記の画像の通りに設定を変更します。
(実際の当サイトの設定内容です。)

画像
デフォルト設定から少し変えて、こんな感じで設定しています!

しかしながら、今の設定ではSendmailを使用してメール送信している状態です。
このままですと、問い合わせフォームから入力した結果の自動配信メールが「迷惑メール」として認定される可能性が高いため、後にSMTPを使用してメール送信するように設定変更します。
そのやり方については、後日記述します。

※当ドメイン(tecchan.jp)については、今は新規申込ができないG Suite無償版(最大30アカウント)を使用しているため、やり方を今一度調べてから対応します。どうやら2017~2018年あたりから仕様変更があるようです。レンタルサーバーなどのSMTPを使用する場合は、とても簡単です。

SiteGuardの設定変更

SiteGuard→ログインページ変更をOFFに設定します。

こちらのサイトに書かれている方法 で、.htaccessから管理画面(ログインページ)URLを変更するように設定します。

ブロックエディターの使い方(Wordpress 5.3以降)について

WordPress 5.3でのブロックエディターの使い方(特にSWELLでの対応レベルはすごいです!)は、テーマ開発者の了さんが丁寧に情報公開してくださっています。
特に勉強をしなくても、「それなり」には直感的に使えるとは思います。
しかしながら、「体系的に学んでみたいな」という人には、下記の情報を参照してみることをオススメします。

とりあえず、このあたり見ておけば大体は大丈夫かな!と思います。

SWELLテーマは本当におすすめです。

SWELLテーマは、本当におすすめです。記事がサクサク書けます。
サクサク書きたくなります!(笑)

この記事を読んでみて「SWELLの購入をしてみたいな」と思った方は、下記より是非お求めください!

画像
SWELLテーマについてはこちらから!正直おすすめのテーマです。

言い忘れましたが、SWELLテーマの更新頻度はすごく高いです。今後にも期待できそうです!

それでは、また。

関連記事

目次