MENU

ブログのつくり方

WordPressブログを作成し、整える手順。

副業ブログも趣味ブログも、このあたりの手順はほぼ共通。

なお、2023年以降の手直しについてはこのページには記載していない。

目次

WordPressブログの立ち上げ

blog.kazuki.page、ilog.kazuki.page （2022/09〜）

サーバーを契約してある状態からのスタートだった。細かいところは多少ぼかしてある。

※note.kazuki.page（実際に残っているのは ilog.kazuki.page） もほとんど同じ設定。

  • ドメインを契約
  • ドメインとサーバーの紐付け
  • WordPressのインストール

WordPress基本設定

かなり基本的な話
  • サイトSSL化
  • セキュリティプラグイン導入＆有効化
  • 不要な初期プラグイン削除
  • 必要なプラグイン追加
    • 画像圧縮系（webpにできるやつ）
    • xml sitemap を作成するやつ
    • 記事の編集履歴をコントロールするやつ
    • SEO系
  • コメント機能オフ
  • ユーザーの追加＆削除（最初に追加したユーザー名が脆弱だと判断したため。）
  • ニックネームの設定変更
  • サイトタイトルとキャッチフレーズ
  • パーマリンクの設定
  • 画像のフォルダ分け（年月ベースの格納方法に「しない」設定に変更）
  • WPテーマ（swell）導入

メモ：このあたりの細かい設定って、書いてしまうとセキュリティホールになるんじゃないかと心配になる。どうなんですかね？

外観のカスタマイズ

手こずったところのみメモ。

人気ランキングのラベルをシンプルに

/* 人気記事ランキングのラベルをシンプルに */
.-w-ranking .p-postList__item:nth-child(1)::before {
  background-image:none;
	background-color:#d4b572;
}
.-w-ranking .p-postList__item:nth-child(2)::before {
    background-image:none;
	background-color:#aaabab;
}
.-w-ranking .p-postList__item:nth-child(3)::before {
  background-image:none;
	background-color:#b15a5e;
}

参考にさせていただいたサイト↓

The Cat's Pajamas（ぱじゃねこ）
SWELLの人気記事ランキングにあるラベル色を変更するカスタマイズ方法 | The Cat's Pajamas（ぱじゃねこ） この記事ではWPテーマ「SWELL」のウィジェットにある 人気記事ランキング についているラベルの色を簡単に変える方法をメモしておきます。 「SWELL」のウィジェットにある...

プロフィールの文章を中央に寄せる追加CSS

.p-profileBox__text {text-align: center;}

参考にさせていただいたサイト↓

https://mame-eng.com/swell-profile-center/

プロフボックスの外枠を消す

自力解決。

/* プロフボックスの外枠を消す */

.p-profileBox{
	border: none;
}

スマホに置いて日付が改行される問題を解決

自力解決。

/* 日付の改行問題の解決 */

.p-articleMetas__times{
	width:85%;
}

ページセレクタを削除

  • 記事数が少ないうちは邪魔
  • 記事一覧の表示方式を「テキスト」にしているので、長い間（50記事くらい？）不要。

自力解決。

/* ページナンバーを削除（記事少ない内のみ） */

.page-numbers {
	display: none;
}

外部連携

  • twitterのプロフ・リンクなどの設定変更
  • Pinterestのプロフ・リンクなどの設定変更
  • GA4、Search Consoleの設定

信頼性向上

とにかくお問い合わせ設置がめんどくさかった。（どうしようか迷った）

リキャプチャをインライン表示させるプラグインがちゃんと更新されていれば、こんなことにはならんかったのだが…

  • プロフィールの設置
  • ポリシーの設置
  • お問い合わせの設置
    • Contact form 7（リキャプチャが使いやすいから）
    • フォーム作成（後述）
    • リキャプチャの導入
    • リキャプチャをお問い合わせのみで読み込ませる設定（後述）
    • リキャプチャをほかのモノより上に表示させる設定（後述）
    • お問い合わせのページ作成
      • お問い合わせページのCSSに #pagetop{display:none;} と記述（上に戻るボタンを非表示に）
      • Contact form 7 のショートコードを貼り付け
      • Contact Form 7 デザイン変更（後述）

コンタクトフォーム作成

色々見ながら下記の内容に落ち着いた。

<label> 名前(200文字以内)
    [text* your-name minlength:1 maxlength:200] </label>

<label> メールアドレス
    [email* your-email] </label>

<label> タイトル(200文字以内)
    [text* your-subject minlength:1 maxlength:200] </label>

<label> メッセージ本文(800文字以内)
    [textarea* your-message minlength:0 maxlength:800] </label>

[submit "送信"]

リキャプチャをほかのモノより上に表示させる設定

カスタマイズ→追加CSSに下記を追記

.grecaptcha-badge {
z-index: 10000 !important;
}

こちら↓を参考にさせていただいた。

タルト株式会社
Googleリキャプチャ(reCAPTCHA)v2/v3の導入 ～WordPressサイトにも対応～ | タルト株式会社 この記事では「Googleリキャプチャ(reCAPTCHA)v2/v3の導入」についてどこよりもていねいに解説いたします。全ての人が読めるようどんなWebサイトにも導入できるようパター...

コンタクトフォームデザイン変更

下記のコードを「お問い合わせ」ページのカスタムCSSに記述。

.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-subject"] {
        width: 100%;
        height: 35px !important;
	background: #fff;
}

.wpcf7 textarea[name="your-message"] {
        width: 100%;
        height: 300px !important;
	background: #fff;
}

.wpcf7 input[type="submit"] {
width:50%;
padding:10px;
margin-top: 30px;
margin-left: 25%;
color: #fff;
border-radius:10px;
-webkit-border-radius: 0px;  
-moz-border-radius: 0px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #333333;
transition: 0.3s;
}
.wpcf7-submit:hover {
background: #333333;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}

下記のページを参考にさせていただきました（色は変更しました）

Crea Webdesign｜ホームページ制作...
【SWELL】Contact Form 7（コンタクトフォーム）のカスタマイズ方法【コピペOK】 「当ページのコンテンツにはプロモーションが含まれています」 テーマをSWELLに変更したところ、Contact Form 7（コンタクトフォーム）で作った「お問い合わせフォーム」が...

SWELL 高速化

肝になるのはこの部分↓

SWELL
「スクリプトの遅延読み込み」機能の使い方について | WordPressテーマ SWELL SWELL ver. 2.5.6 から、スクリプトの遅延読み込み機能を追加しています。 この記事では、その使い方について解説していきます。 注意事項 効果を発揮するには、適切な設定...

リキャプチャをお問い合わせのみで読み込ませる設定

外観→テーマファイルエディタからfuctions.phpに下記を記述

function load_recaptcha_js() {
 if ( ! is_page( 'contact' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

こちら↓を参考にさせていただいた。

あわせて読みたい
Google reCAPTCHA V3 を任意ページのみに表示する方法 | みらいクリエイターズ Google reCAPTCHA を Contact Form 7 に設定すると全ページにロゴが表示されます。ここでは、お問い合わせページだけにロゴを表示する方法について解説します。

contact form 7 のファイルを必要な場合のみ読み込む

// contact form 7 のファイルを必要な場合のみ読み込む
function wpcf7_file_control()
{
    if( !is_page("contact") ){
        wp_dequeue_style('contact-form-7');
        wp_dequeue_script('contact-form-7');
    }
}
add_action("wp_enqueue_scripts", "wpcf7_file_control");

ログイン時以外はdashiconsファイルを無効

WordPressのログインした後に表示されるページに関するファイルを、ログインしたときだけに読み込ませるようにする。

//ログイン時以外はdashiconsファイルを無効
function dashicons_deregister_style()
{
    if ( ! is_user_logged_in() ) {
       wp_deregister_style( 'dashicons' );
	}
}
add_action( 'wp_enqueue_scripts', 'dashicons_deregister_style');

検索結果のカスタマイズ

下記コードを追記すると、検索結果がなかったときの画面で呼び出しコードに対応したブログパーツが呼び出される。

function kanta_serch_result(){
        $kanta_form = do_shortcode( '呼び出しコード' );
        return $kanta_form;
}

add_filter( 'swell_post_list_404_text', 'kanta_serch_result');

こちらを参考にした。

SWELLマニア
【SWELL】サイト検索で条件にマッチする記事がない場合の表示をカスタマイズする方法 | SWELLマニア 「記事が見つかりませんでした。」の文章を替えたい…メッセージの下に検索フォームを表示したい…テンプレートファイルを変更しないでカスタマイズしたい… そんな悩みを解決...

プラグイン

Broken Link Checker

下記のサイトが詳しい。

あわせて読みたい
サーバー負荷を考慮！Broken Link Checkerの設定手順 Broken Link Checkerの設定手順を徹底解説！Broken Link Checkerは適当に設定するとサーバーに負荷がかかり、サイトが重くなる原因になります。サーバー負荷を考慮した正し...

WordPress Ping Optimizer

Pingの頻度を減らす設定をする。

アイコン・OGPなどの作成

メディパンペイントProを利用して自作。

アプリケーションは、かつてイラストを描いていた名残。（今ではほとんどスキルは残っていないが。）

ヒトを描くのは難しいかもしれないが、ぬいぐるみであればまだ描けるかなということで挑戦。

満足いくできになったので外注はしなかった。

過去のトラブルシューティング

WordPressにログインできない

サクッとセットアップしたつもりだったが、ログインできなかった。

理由は、管理者のIDを60文字以上にしていたから。

WordPressの管理者IDが上限60文字なので、60文字以下の部分のみでアカウントが作成されていたと思われる。

一方で、私はサーバーの設定時に入力した255文字でログインしようとしたのでできなかった。

結局はまるまる作り直して解決。

別のサイトのデータベースを間違えて消した

この記事を参考にして復旧した。

シスブロ ブログ
ConoHaWINGでリストア不可のデータベースを復元する方法 どうも！シスブロ（@sysbloblog）です！ 今回はブログの設定についてです！サクッとまとめると・・・データベース(DB)を消して自動バックアップをしているはずがリストア不...

広告タグが編集できない

サーバーのWAFを切ってやればできた。

function.php が編集できない

「致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。SFTP を使うなど、他の手段で PHP ファイルの変更をアップロードする必要があります。」

いろいろな原因があるようだが、

私はSite Guard WP Plugin の一番上の項目である「管理ページアクセス制限」をオフにしてやれば編集できるようになった。

function.php に追記

contact form 7 のファイルを必要な場合のみ読み込む

そのまま。「contact form 7」というお問い合わせ用プラグインに関する設定

ログイン時以外はdashiconsファイルを無効

WordPressのログインした後に表示されるページに関するファイルを、ログインしたときだけに読み込ませるようにした。

コードは下記

// contact form 7 のファイルを必要な場合のみ読み込む
function wpcf7_file_control()
{
    if( !is_page("contact") ){
        wp_dequeue_style('contact-form-7');
        wp_dequeue_script('contact-form-7');
    }
}
add_action("wp_enqueue_scripts", "wpcf7_file_control");

//ログイン時以外はdashiconsファイルを無効
function dashicons_deregister_style()
{
    if ( ! is_user_logged_in() ) {
       wp_deregister_style( 'dashicons' );
	}
}
add_action( 'wp_enqueue_scripts', 'dashicons_deregister_style');

WebP Converter for Mediaを使ってもWebPにならない

一部の画像のみで発生した。が、問題ではなさそう。

ファイルサイズが、「Tiny PNG で小さくしたpng ＜ WebP」の場合、

「元の形式よりも大きい出力形式のファイルの自動削除」の設定に従って、pngが表示されるようになる、と考えられる。

使ってないけど使いそうな情報

SWELLのフック

SWELLマニア
【SWELL】フックって何だ？関連記事の表示件数を8→4に変更する方法 | SWELLマニア SWELLのフォーラムで「フックがあります」ってコメントがあったけど、フックって何だろう？誰にも聞けない...ネットにも情報が見つからない.... そんな悩みを解決します。 ...
blog
目次