「SWELL」導入時のメモ【2020】

サーバーの登録から、WordPressテーマ「SWELL」の導入までを備忘録として纏めてみた。調べれば済むことは時間の無駄だから敢えて書かない、リンクを貼っておく。これからワードプレスでブログやサイトを制作したいと思っている方の参考になれば嬉しい。

@TOC

サーバーの登録から

WordPressを始めるにあたって、必須なのがサーバーである。現時点でオススメのサーバーは「ConoHa WING」。他にもAWSやら色々あるけど、スピード、値段、使い易さを考えるとこれが一番かと。

WordPressテーマ「SWELL」のインストール

このブログで使用しているテーマは「SWELL」。今のところ、お世辞抜きに一番オススメできるテーマだと思う。詳しくは別の記事で書こうと思っているので書かないが、とにかく使い易くてオススメできる。

また、マニュアルが充実しており、不明点も会員専用フォーラム(またはSlack)で質問することが可能だ。これは当たり前であって欲しいことだが、ユーザー任せのテーマが多い中で有難いポイントである。

プラグインの設定

WordPressは自由であることが最大のメリットである。逆に言えば全て自分で設定をしないといけないのが難点でもある。SWELLのマニュアルには推奨プラグインが羅列してあるが、設定方法も含め改めてメモしておく。

「WP Maintenance Mode」サイトを非公開にする

サイトをメンテナンスする時はあんまり見られたくない。そんな場合に便利なのが「WP Maintenance Mode」というプラグイン。

メンテナンス中の画面背景や残り時間などもデザインすることができる。

「SEO SIMPLE PACK」SEOプラグイン

最初は必要ないかもしれないが、OGPの設定や記事のディスクリプションなど、あれば助かる機能がシンプルに搭載されている。

SEOプラグインは数多くあるけど、「SWELL」の製作者さんが作った「SEO SIMPLE PACK」を使用してみた。テーマ同様にレイアウトが美しく、初心者でも扱いやすいと思う。

「Highlighting Code Block」シンタックスハイライター

もしコードを書く機会のある方であれば必須のシンタックスハイライター。今までは「highlight.js」を使っていたけど、なぜか整形できないトラブルがあって別のを探していた。

ここでも「SWELL」の製作者さんが作ったプラグイン「Highlighting Code Block」を導入することにした(別に回し者ではないが)。純正?ということもあってか、非常に使いやすい。いちいちエスケープ処理をしなくていいのは楽だ。

「WP Multibyte Patch」文字化けを防止

WordPressはもともと、英語がベースである。なので、稀に文字化けを起こすことがある。

それを防止するためのプラグインが「WP Multibyte Patch」。大抵の場合、デフォルトのプラグインに入っているはず。有効化するだけで特に操作は必要ない。詳しく知りたい方は下記を参考に。

「Invisible reCaptcha」スパム防止

ブログを運営している中で問題になってくるのがしつこいスパムである。お問い合わせを見てみたら何だかよくわからない内容だったということは珍しくない。マジで止めてほしい。

そんな、誰の得にもならないスパムを撃退するプラグインが「Invisible reCaptcha」。

導入すればコメント欄でよく見受けられる「アレ」が表示される。怪しいロボットを判別してくれる頼もしい相棒、必ず入れた方が良い。

「BackWPup」自動バックアップ

いつなんどき訪れるか分からないデータのバグ。もしもの時のためにバックアップを取っておくことは必要不可欠だ。

「Contact Form by WPForms」お問い合わせフォーム作成

お問い合わせフォームはブログからビジネスに繋げたい人にとって重要なものである。

「Contact Form 7」というプラグインが有名だが、今回は「Contact Form by WPForms」を導入してみた。直感的に操作できるので、初心者にもオススメ。

「Site Guard WP Plugin」セキュリティ対策

セキュリティ対策は必ずしなければならないことし、し過ぎるということもない。

最低限の対策であれば「Site Guard WP Plugin」を入れておけば大丈夫だと思う。日本製のプラグインで設定も難しくない。

セキュリティ対策は沼なので、あまりこだわりすぎてサイトが重くなるのは避けたいところだ。

「WP-Optimize」不要なデータを削除

WordPressのデータベースには不要なものが徐々に蓄積されていく。大したデータ量ではないが、後になって響いてくるのであらかじめ最適化する設定にしておけば楽することができる。

「Rinker」商品リンクの管理

もしブログを通じて商品レビューをする予定の方にオススメのプラグイン「Rinker」。検索するだけで画像や各種リンクを作成してくれるのでとても便利である。

ただ、Amazonの検索にはAmazonアソシエイト・プログラムの審査に合格する必要があり一筋縄ではいかないんだな。すぐには使わなくてもいずれ活躍してくれることを信じて、とりあえず入れておこう。

FTPソフト「FileZilla」のダウンロード

FTPソフトはWordPressをカスタマイズする上で頻繁に登場するソフトである。どうせ入れるなら早いうちに済ませておけば後が楽だし、使い方も合わせて覚えておけば心配なし。

「Googleアナリティクス 」を導入しデータ分析

データ分析には「Googleアナリティクス 」と相場が決まっている。このデータを元にサイト運営を進めていくので早めに登録することをオススメする。

「Search Console」にサイトマップを登録

Search Console(サーチコンソール )」に登録することで、サイトの存在が検索エンジンにどう評価されているか分かる。例えば、検索順位やおかしいところがないかのアドバイスなど。

まずはサイトマップが必要だが、これは誰でもプラグインで簡単に作成できる。Search Consoleへの登録方法を含め、下記のサイトが非常に参考になる。初心者の方には1つの壁かもしれないかな。

その他のしておくと良いよって設定

とりあえず、上記の作業が終われば各種カスタマイズをして、記事の執筆に取り掛かれる。その際にはメンテナンスの解除を忘れずに行おう。

これから書いていく設定については、興味のある人だけやってもらえれば構わない。個人的には、どれも採用した方が良いと思えるものばかりではあるけど。

画像サイズの自動生成をストップ

WordPressは画像をアップロードしたとき、勝手にリサイズしてそれを全て保存する機能がデフォルトで付いている。一見すると便利な機能に思えるが、あらかじめサイズを変更してアップロードしているのであれば無駄な機能で、百害あって一利なしだ。

以下のコードをfunctions.phpに記述することでリサイズの自動生成をストップすることができる。

add_filter( 'intermediate_image_sizes_advanced', 'disable_image_sizes' );
function disable_image_sizes( $new_sizes ) {
 unset( $new_sizes['thumbnail'] );
 unset( $new_sizes['medium'] );
 unset( $new_sizes['large'] );
 unset( $new_sizes['medium_large'] );
 unset( $new_sizes['1536x1536'] );
 unset( $new_sizes['2048x2048'] );
 return $new_sizes;
}

add_filter( 'big_image_size_threshold', '__return_false' );

パーマリンクの設定

「Smallchat」を設置する

当サイトの右下にある(現在はない)チャットボックスは「Smallchat」を利用して導入してみた。お問い合わせフォームよりもカジュアルにコミュニケーションが取れるので気に入っている。

導入方法もシンプルで簡単。

CSSで追加のデザイン

追加CSSにコードを書くことで多少デザインを変えてみた。あまりカスタマイズはしない方針だが、最低限の項目だけ。結局めちゃくちゃカスタマイズした。。

外部リンクにアイコンを追加

/* 外部リンクアイコン */
.post_content a[target="_blank"]::after {
    font-family: "Font Awesome 5 Free";
    content: "\f24d"; 
    font-weight: 400;
}

テキスト選択時の文字色・背景色を変更

/* テキスト選択時の文字色・背景色を設定 */
::selection {
    background: #D9DAC5;
    color: #3a3833;
}

::-moz-selection {
    background: #D9DAC5;
    color: #3a3833;
}

まとめ

以上が記事を書くまでにすることの作業である。もう一度改めて纏めてみた。

一連の流れ
STEP
サーバーの登録 

約60分

STEP
ワードプレステーマ「SWELL」のインストール

約15分

STEP
プラグインの設定

約60分

STEP
FTPソフト「FileZilla」のダウンロード

約20分

STEP
「Googleアナリティクス 」を導入しデータ分析

約10分

STEP
「Search Console」にサイトマップを登録

約20分

STEP
その他の設定

約15分

約200分、3時間がサーバーの契約から記事の執筆までに掛かる時間だ。しかし、不慣れな人であれば倍ちかくの時間が必要かもしれない。

比較的わかりやすい解説ページをリンクとして選んだので、その通りに進めればきっと大丈夫だ。コーヒーでも飲みながら気楽に進めていこう。

List of comments (1)

Leave a Reply to 実印 Cancel reply

@TOC
閉じる