WordPress超初心者が知らないとやめたくなる始め方の＋α

「サーバーに契約した！ドメインが手に入った！WordPressの初期設定もした！さぁ記事を書くぞ！」と気合に満ちたあなた。

ちょっと待ってください。
記事を書く前に設定してほしいことがまだあります。

これらをきちんと準備をしていなかったわたしは、あとから泣きを見ることになりました。

WordPressで記事を投稿する前に知っておいてほしいこと、

をお伝えします。

WordPressは、ブログやデータ管理、コードの知識のない初心者には管理が難しいものです。

基本的なことでブログをやめたくなってしまわないように、防げることは防ぎましょう！

初期設定のあとに絶対やるべきこと3つ

初めたてというのはよく分からない暗闇くらやみを手探てさぐりで進んでいくようなものですよね。

そんな中で見つけた解決策は、同じ問題が出たときに再現するのが難しいことがあります。

理由は意味までを深く理解していないため、解決方法を忘れてしまうからです。

ですから、まず意味が分からなくても取り敢あえず解決を再現できるように、わたしが「始めたてで知りたかったなぁ」と思うポイントと解決方法をお伝えします。

まずは初期設定のあとに必須の3つをご説明します。

内容は、

です。

※SEO…SEOとは検索エンジン最適化の頭文字です。より人の役に立つ記事を上位表示(Googleで検索したときにすぐ表示される)させようというGoogleが、システムを使って行っています。

※SEO対策…SEO対策とは、このシステムに「有益なサイト」と認識してもらい、検索の上位に表示してもらうための対策です。

始める前にバックアップの準備を！！

バックアップとは保存用のデータを残すことです。

WordPressは動作が不安定と言う声もあり、ユーザーの意図しない※動きをすることがあります。

思わぬ操作からいきなり大量の情報が消えてしまうことも稀まれではありません。

そんなときにバックアップを取っていないと、一気にやる気も消えてしまいます。

積み上げた時間と努力を失わないために、作業を始める前に必ずバックアップを取る準備をしましょう。

今回は物理媒体ぶつりばいたいだけではなく、サーバーも含みます。

※意図しない…本人の思いとは別の結果になってしまうこと

プラグインBackWPupを使う

BackWPupはバックアップの定番のプラグインで、設定すると自動でサーバーにデータを残すことができます。

また、作成されたバックアップファイルは管理画面メニューの「BackWPup」＞「バックアップ」のバックアップファイル一覧から目的のファイルを選んで「ダウンロード」を押すとパソコンに保存することもできます。

サーバーへの自動保存のほかに、定期的に手動でパソコンに保存することもおすすめします。

保存できるデータは

のすべての情報です。

BackWPupはダウンロードするだけでなく、設定も必ずしておきましょう。

設定についてはバズ部さんの「バズ部」の 　 こちらの記事がとてもわかりやすいです。

ちなみに、わたしが今回設定見直しをしたら間違っていたポイントがありまして、

の2点です。

レンタルサーバーのConoha WINGを使う

Conohaコノハ WINGウィングは自動で過去14日分のwebデータ・メール・データベースを保存してくれます。

これは設定が必要ないので初心者に大変ありがたい機能です。データはサーバー上に保管されます。

他のレンタルサーバーでもバックアップ機能があるものは必ず設定しておきましょう。

ちなみにConohaコノハ WINGウィングでは24/2/6から「SEOに強い記事構成が作れる」AIブログ生成ツール『Blogブログ Creatorクリエーター』という有料ツールの提供が始まりました。

月額利用料金は

• Lite ： 330円
• Standard ： 1,980円
• Business ： 4,980円

で、Liteには1か月無料トライアルがあります。

生成AIのサポートがあると、初心者でもブログを始めるハードルがぐっと下がるのではないでしょうか。

Conohaコノハ WINGウィングの公式サイトは 　 こちら。
AIブログ生成ツール『Blogブログ Creatorクリエーター』について知りたい人は、トップページを下にスクロールしていって、「WordPressに特化した充実の多機能」の項目の「AIブログ生成ツール」から詳細を見ることができます。

Cocoonコクーン設定のバックアップを使う

テーマCocoonコクーンを使っている人は、Cocoonコクーン設定にあるバックアップ機能を使うのも良いでしょう。

ただし、Cocoonコクーン設定のバックアップは一部の情報のみで、追加CSSやバルーンの設定、ランキングなどは対象外です。

対象外部分のデータを保存する方法は別にあります。

　 Cocoonコクーン設定のバックアップ方法やバックアップ対象外のデータを保存する方法はCocoonコクーンの公式サイトに記事が載っています。

「なんでそんなことしたの？」って声が聞こえてきますが、「リストア」の意味を知らなかったのでつい試してみたくなってしまったんですね。

「リストア」とはバックアップデータを反映させる作業です。

追加CSSの内容をメモする

次は文字や目次などのデザインを変えるのに便利な「追加CSS」についてお伝えします。

追加CSSとは

WordPressでは「追加CSS」でCSSコードを記述することができます。

CSSは、web上で表示するための基もとになるHTMLを装飾するための言語です。

文章レイアウトを構成するHTMLのコードにCSSの内容を呼び出す記述を入れることで、画面に反映させます。

これはサイトのデザインをカスタマイズするのに活躍します。

テーマCocoonコクーンの基もとになっているのは親テーマです。

親テーマは間違った改変をすると、最悪サイトが表示されなくなります。

そして、追加CSSはデザインに特化したCSSコードが書き込めるもので、親テーマのように気を張って編集に臨のぞまなくて済みます。

追加CSSのバックアップと復旧方法

【バックアップ方法】

「追加CSS」はよく書き換えるので、コピペでバックアップしましょう。

追加CSSのどこかをクリックしておき、Ctrl＋Aで全文選択しCtrl＋Cでコピーします(消したり改変しないように気をつけて作業してください)。

あとはWordワードやGoogleグーグルドキュメントやメモアプリにCtrl＋Vで貼り付けしておくと良いです。

テキストエディターが使える人はそちらを使って保存しても良いと思います。

【復旧方法】

「追加CSS」を間違って消してしまったときや修正不可能な改変をしてしまったときに、一部、あるいは一旦いったんすべて消します。

そして、必要な部分をコピーしてあったメモアプリからコピーしてきて「追加CSS」に貼り付け直せば良いです。

データの種類

WordPressのデータの種類は先ほどBackWPupの項でお伝えした

です。

消してしまったデータがどのデータが明確な場合は、そのデータだけ復旧すれば良いです。

バックアップデータの復旧方法

Conohaコノハ WINGウィングがおすすめな理由の2つ目として

ということがあります。

通常WordPressのデータの復旧には結構な手間がかかります。

概要としては

という手順で、よくわからない単語や「FTPツール(ソフト)」というよくわからないツールを使わないといけないので長い戦いになります。

実際私もこの方法で全データの復旧を行いました。

しかし、Conohaコノハ WINGウィングのファイルマネージャーを使うと

と、FTPツール(ソフト)を使うことを省略できるのです。

ちなみに、データの復旧にはサーバーの管理画面を頻繁に使います。

Conohaコノハ WINGウィングのファイルマネージャーを使ったデータの復旧方法で、「Conohaコノハ WINGウィングのサーバーデータ」から復旧したい場合はヒトデさんの「hitodeblog」の 　 こちらの記事を

「BackWPup」で取ったデータから復旧したい場合は、ヒトデさんの「hitodeblog」の 　 こちらの記事の「「BackWPup」のバックアップデータを使ったサイトの復元方法」の項目が分かりやすいです。

また、無料のFTPソフト「FileZilla」を使った復旧方法については、 　 こちらのShotaさんのブログフェニックスの記事で分かりやすく解説されています。

ちなみに、わたしは↑このとても丁寧に解説されているブログを参考にして復旧しましたが、知識が足りなくて引っかかりつまづきまくりました…初心者の陥りがちなポイントをまとめた記事を制作中です。

ビジュアルエディターとコードエディターを切り替えてはいけない！！

これは、WordPressを使うなら知識として必ず知っておいてほしいことになります。

まずエディターとはなにか、からご説明します。

エディターとは

まず、WordPressには記事を制作・編集するエディターという画面があります。

「editエディット」という言葉は「編集する」という意味で、プログラミングコードや文書ファイルを作ったり書き換えるためのプログラムやソフトを「editorエディター」と呼びます。

プラグインで旧エディターも使えますが、旧エディターのサポートは終了しているので、新しいブロックエディター(Gutenbergグーテンベルク)を扱えるようにするのが良いでしょう。

ブロックエディターの中ではさらに、ビジュアルエディター(見た目がアップロードした記事に近い編集画面)とコードエディター(プログラミングコードのみを表示した編集画面)を切り替えられます。

コードに慣れている人はコードエディターでも良いと思いますが、初心者はビジュアルエディターをおすすめします。

用意されている機能で、コードの書き込みを短縮できるからです。

ビジュアルエディターとコードエディターを切り替えてはいけない理由

ブロックエディターを使う際ビジュアルエディターとコードエディターを切り替えてしまうと、切り替えの際にシステムにコードを勝手に書き換えられてしまいます。

これはWordPressの仕様です。

コードが書き変わると、きちんと表示されなくなったり、改行などがなくなってしまったりします。

また、ブロックエディターのブロックは段落ごとに区切られてできるので、ブロックを指定すればビジュアルエディターに用意された機能をスムーズに使えます。

しかし、コードエディターに切り替えてしまうと、いくつものブロックがコードのまとまりに変換されて、ブロックとして扱えなくなるということが頻繁に起こります。

その場合、間にブロックを挿入できなくなるのですべてコードで記述しなければいけなくなります。

この現象に何度泣かされたことか…。

同じ理由でツールバーに表示される「プレビュー」も押さないようにしましょう。

ビジュアルエディターとコードエディターはなにかの弾みで切り替えてしまう可能性もあるので、原因がわかってphpの記述で対策できる人は早い段階でやっておいたほうが良いです。

ちなみにわたしは書き換えを軽減する記述を見つけてfunction.phpに記述してみましたが、エラーで更新ができませんでした。

コードが勝手に変わってしまうたびに助けてくれたのがリビジョン機能です。

「revisionリビジョン」とは修正や見直しという意味です。

リビジョン機能とは、記事の改変を自動で保存してくれている機能です。

便利なのですが、いちいち保存をするので保存容量を圧迫します。

リビジョンはよく使うので、保存機能を保ちつつ、データ容量を制限しました。
初心者が改変するのはちょっとハードルの高い親テーマのwp-config.phpに記述をしています。

「リビジョン機能を知っておこう」へ

記事編集画面からプレビューを使ってはいけない！！

記事編集画面の右上にある「プレビュー」ボタン、こちらからプレビュー画面を表示することもシステムが勝手にコードを書き換えるトリガー(引き起こすきっかけ)になります。

画像もSEO対策が必要！

次はSEOで上位表示をしたい人向けのお話です。

なんと、画像もSEO対策が必要らしいということを最近知りまして。

既に130枚アップロードしてからだったので、手直しの作業の多さにちょっと泣きたい気分です。

ですから、みなさんには最初から対策してもらいたいです。

画像ファイル名の付け方

画像のSEO対策としては

この2つを行います。

まず、

です。

Google検索では表示順位を決めるために、「クローラー」というロボットが記事をチェックしに来ます。

Googleのクローラーは英語しか認識しません。

記号は「_」(アンダーバー)も使えるのですがGoogleでは「-」(ハイフン)を推奨しているそうです。

理由は、検索エンジンが「_」(アンダーバー)を認識しないからだそうです。

また、できるだけ小文字で作るのが良いそうです。

ちなみに画像や動画などのメディアファイルのファイル名はアップロードしてしまうと変えられないです。

また、ファイル名を変えることができるプラグインがありますが、変える場合は投稿記事に挿入したコードの「img src」(イメージソース)で指定したURLも変えなければいけないということです。

「Media File Renamer」というファイル名と記事に挿入した画像の名前を両方変えられるプラグインを試しましたが、無料の範囲では1度しか変更できなかったです(2024/1)。

また記事に挿入した画像の「img src」が変わらず、スマホで画像を見られなくなったものがいくつかありました。

altオルト属性

次に、

とういことです。

WordPressではメディアライブラリで個々に付けられる「代替だいたいテキスト」がaltオルト属性になります。

画像がなんらかの理由で表示されなかったときに代わりに表示される代替だいたいテキストは、このaltオルト属性を参照しています。

また、目の不自由な人への読み上げの際にも使われますので、日本人向けのブログなら日本語で良いです。

表示されない画像も教えてくれるプラグイン「リンクチェッカー」

●プラグインの種類にリンク切れを教えてくれるリンクチェッカーというものがありまして、その1つである「Brokenブロークン Linkリンク Checkerチェッカー」を入れておくと、画像のリンク切れと記事内でのジャンプリンクも教えてくれるから、とてもありがたいです。

画像のリンク切れの通知を見ると、「img src」が画像のURLと一致しないものがわかります。

一致しないものについては表示されません(PCではキャッシュが残っていて一時的に表示されることがあります)ので、「img src」のURLを書き換えましょう。

ちなみに記事内を移動できるジャンプリンクは、多分投稿前の記事だとリンク切れと判断されている様子で通知が出ます。

投稿すればなくなりますので特に気にする必要はありません。

ファイル名を楽に決めるためのコツ

画像のアップロードのたびに「英語のファイル名」と「日本語で代替テキスト」を考えるのですが、英語わからない民のわたしにはGoogle翻訳を使ってもなかなかに大変な作業です(Google翻訳ってたまに正確ではないことがありますし…)。

作業を少しでも楽にするためにできるアイデアを2つお伝えします。

テンプレートを作っておく

と作業が楽になります。

コピーして使いましょう。

生成AIを使ってみる

また、最近流行りの生成AIを使っても時短になります。

わたしはマイクロソフトのブラウザ「bingビング」を使っていますが、チャットでこのような指示を試してみました。

このように指示をすると半角ハイフンの入った英分ができあがりました。

指示の方法 1と2ではかなり近い結果が得られました。

次にこのような文章も試してみると

と「イラスト」であるという表現が抜けてしまいました。
これに「illustration-of-」を足して逆に日本語に翻訳してもらうと

とかなり最初の文章に近い訳になりました。

Google翻訳でもbingビングのchatチャット–GPTジーピーティーでも完全に望む結果になるとは限らないので、英語の知識も身に着けて手直しできると良いですね。

生成AIを作業に取り入れていきたい人は、自分なりのプロンプト(動作をするよう促すもの、この場合AIに出す指示)を確立して、スムーズに作業ができるようにすると良いかもしれません。

知っておくと作業が楽になること3つ

お疲れ様でした。

よくわからない単語も多くて初心者さんには読むだけでも疲れますよね(；´Д｀)

次は先程の3つより優先順位は下がりますが、重要度はかなり高いと思われる3つのことです。

についてご説明していきます。

リビジョン機能を知っておこう

「ビジュアルエディターとコードエディターを切り替えてはいけない理由」でも触れましたが、リビジョン機能とは、記事を更新するたびに自動で保存してくれる機能です。

記事のすべてのデータが残っていて、好きな時点の記事の状態を復元できます。

「リビジョンデータの蓄積ちくせきが重くなるからリビジョンを止めたい」という人がいますが、わたしは細かい変更でもよく戻したくなるのでリビジョンは取っておきたいです。

何度もこのリビジョン機能に助けられていて、とても大切な機能です。

※おそらく、親テーマのファイルを子テーマにコピーすると子テーマで編集ができるようになると思うのですが、まだ実行したことはありません。

リビジョンデータの制御の仕方については 　 こちらのザキさんの「ソロ学」の記事が分かりやすく解説されています。
後述の「自動保存をしたくない人はwp-config.phpに記述しよう」についてもこちらを見るとわかります。
実施する際は必ず「wp-config.php」ファイルのバックアップを取ってから行いましょう。

「wp-config.php」へのアクセス方法については 　 こちらのhrkmさんの「hrkmblog」の記事で分かりやすく解説されています。

また、溜まってしまったリビジョンのデータはプラグインを使うことで削除できます。

こちらは「リビジョン　削除　プラグイン」などと検索をすると方法を解説した記事がたくさん見つかります。

わたしはすでにたくさんのプラグインを入れてしまっているので、ページの動作が重くならないようにプラグインを使わない方法で削除をしました。

サーバー(ここではConohaコノハ WINGウィング)の管理画面から「サイト管理」＞「データベース」＞「ユーザー」の項目から適用したいサイトのユーザー名を選び、ユーザー名の左についている「>」をクリック＞管理ツールの「 phpMyAdminマイアドミン」にログインして作業を行います。

プラグインを使わないリビジョンデータの削除の仕方については 　 こちらの「知りたいねっと」さんの記事の「リビジョンをphpMyAdminマイアドミンからMySQLにアクセスし手動で削除」の項目が分かりやすいです。
「 phpMyAdminマイアドミン」に初めてログインしたのですが自分のサイトのデータベースを選択したあとのやり方が分からず、MySQLに指示を出すやり方がこちらでようやく理解できました。
実施する際は必ず「wp_posts」(もしくはwpの部分が違う文字になっている)ファイルのバックアップを取ってから行いましょう。

ちなみにchatチャット–GPTジーピーティーで溜まっているリビジョンデータ数を見るコードを聞いてみたのですが

というコードがうまく効きました。

ちなみにリビジョンデータを消すコードは

と教えてくれたので、なにかつまづいた人はこの2つも試してみてください。

自動保存をしたくない人はwp-config.phpに記述しよう

WordPressはデフォルトで記事の下書きや更新作業を自動保存します。

というか、自動保存機能は基本的に止めることができません。

わたしのように手動保存の染み付いた人間(昔のゲームは自動保存はなかった)は、自動保存が煩わずらわしく感じることもあると思います。

理由は、保存をしなければ保存前の状態にすぐ戻せるからです。

例えば「随分サムくなったな」と書いてしまったところを「随分寒くなったな」に直そうとします。

すると「瑞分寒くなったナ」と変換してしまいました。

そのときに、こういうミスを10回重ねてしまっていたことに気づいたとします。

この10回ミスをする間に保存をしていなければ、保存せずに別のページをクリックして「ページから離れる」で移動してしまいます。

すると、編集していた記事に戻ったときに10回のミスをする前の状態に戻ります。

しかし、自動保存では保存したくないタイミングでも保存されてしまいます。

このような状態を好まない人は自動保存を止めたいと思うでしょう。

WordPressは、普通に行った操作から意図いとしない動作が起こることがよくあります。

それによって大量に記事が消えたり、修正が難しくなってしまうこともしばしばです。

ですから、修正や復旧をしやすいかどうかはかなり重要な問題になってきます。

いくつか試してみてfunction.phpに記述するコードで自動保存が止まったと思ったのですが、またすぐ復活してきます。

下記のリンクの記事に記載されていますが、どうやらブロックエディターでは効かないということです。

function.phpではなく「wp-config.php」に記述する方法ついては 　 こちらのザキさんの「ソロ学」の記事が分かりやすく解説されています。
実施する際は必ず「wp-config.php」ファイルのバックアップを取ってから行いましょう。

「wp-config.php」へのアクセス方法については 　 こちらのhrkmさんの「hrkmblog」の記事で分かりやすく解説されています。

スマホからの操作はあまりしないほうが良い

WordPressはスマホで操作することができます。

WordPressの開発者の一員(だったと思う)の方が開発した専用アプリと、WordPressそのものの管理画面にもスマホからブラウザでログインができます。

アプリで扱えるのは文章のみです、画像やデザインは変更できません。

ブラウザではほとんどの機能が使えますが、慣れないうちはデザイン前の文章の変更だけに留とどめたほうが良いです。

とても器用な人は大丈夫かもしれないですが、スマホの操作性は細かい作業をするのに向いているとは言えません。

意図しない箇所かしょを消してしまったり、関係ないところに飛んでしまったりというトラブルが起こります。

スクロールしていても勝手にどこかを押してしまって、画面も小さいのでなにが変わってしまったのか分からないことすらあります。

決めておくとあとで困らないこと1つ

最後に、初めに決めておくとあとで困らない

についてお伝えします。

こちらはおまけ程度なので、読まなくても大丈夫です。

できれば使いたいカラーの組み合わせを決めておく

WordPressの設定にサイトの「キーカラー」を決める項目があります。

デザインにこだわりたい、こだわりそうな人はサイトに使いたいカラーを先に選んでおいたほうが良いです。

わたしは記事をアップしたり修正したりするたびにデザインのカラーのバランスが気になって、カラーの調整をしまくって時間を取られています(；´Д｀)

文字の色や装飾の色など、記事が増えるにつれて使いたい色が増えてしまいました。

あとから色の組み合わせを追加しようとすると、バランスが崩れてとても難しいです。

そうならないように、最初から使いたい色の組み合わせを決めておくほうが頭を悩ませずに済みます。　

ただ、良いと思っても文字色が薄くてマーカーの色が濃いと見にくくなってしまったりするので、あとからの微調整は必要かもしれません。

これらは「Cocoonコクーン設定」＞「全体」から設定ができます。

またCocoonコクーンでは「Cocoonコクーン設定」＞「エディター」からよく使う色を「拡張カラーパレット色」として6色設定することができます。

最初はデフォルトの色になっています。

※自分が変えたいすべての場所の色が変わるわけではありませんので、任意で変えたいときは「追加CSS」か子テーマの「style.css」に記述する必要があります。

あまりデザインにこだわらない人は気にしなくても良いと思います。

ちなみに、Cocoonコクーンでは「追加色」は6色ですが、どうも「function.php」や「追加CSS」から増やすこともできるそうです。

カラーの組み合わせは無料で組んでくれるツールもたくさんあります。

「配色ジェネレーター 無料」や「カラー　組み合わせ　ツール」などの検索で見つかります。

取り敢あえず被リンク獲得を目指しながら、まず意識できるSEO対策をまとめました。SEO対策をしていきたい人は 　こちらもどうぞ。

　 こちらは他の記事へのリンクを目立たせるためのブログカードの、基礎的なデザインの変え方です。ブログカードを自分仕様にしたい人はどうぞ。

まとめ

「やっと自分のブログを立ち上げた！これからどんどん記事をアップロードしていくぞ！！」

という矢先に準備作業を増やされるのは、本当にやる気を削そぐと思います。

けれど、あとから困らないために最初の3つは記事投稿の前にぜひやってほしいと思います。

投稿前か、遅くても記事の投稿が少ないうちなら修正の労力も少なくて済みますので、初めは投稿作業を進めながら覚えていくのも良いかもしれません。

大変ですが、そのあとのブログ活動でやる気を喪失しないために、長く続けていくために取り入れてみてください。