【初心者がWordPressで遊ぶ】この2か月半でやったことをまとめてみる。

そいる塾長
そいる塾長

どうも、そいる塾長です。

余談です。塾や勉強関係ありませんがなんか最近質問箱のほうにブログに関する質問がときどき来るようになっているので書いておきます。最近あまり質問箱に回答しなくてすみません<m(__)m>

最近お会いする先生方やTwitterのTLでこのブログサイトを褒めていただけるようになりましたが実は特に何か難しいことをしているわけではありません。全く知識ありませんので(゚Д゚;)

ということでここまでやったことを簡単にまとめてみました。これをやると誰でも簡単にこれと全く同じサイトが出来上がります(笑)

これからブログをWordpressで始めようと思っているもののCSSやらPHPやらの専門知識がなくて躊躇している方の参考になれば幸いです。

まずはWordpressを始める。

進学塾ソイルができるまで(0)「WordPressで塾ブログスタートの巻」
京都に新たな塾が2019年春に誕生します。それまでの過程をこのブログで綴って行きますので、開校までに多くの人に進学塾soilを知っていただければ幸いです。今回は「WordPressで開始の巻」ということで同業の方へ向けて塾ブログについての記事となります。

記念すべきこのサイトでの最初の投稿。ここでは具体的なやり方を書いていなかった気がするので一応書いておきますね。細かな情報はこの辺見てください。私が参考にしたサイトです。

WordPressの使い方|CrossPiece
WordPressの使い方

あ、一応書いておくと、最初私は間違ってこのWordPress.orgWordPress.comなるものとを間違えてしまいました。なんでこんなややこしいものが存在するのかわかりませんが、とりあえず.comではない方ですのでご注意くださいね。一応この辺を参考に。

初心者にありがちな間違い!WordPress.orgだと思ってWordPress.comで登録していない? | かちろぐ
どうも、ソルティーです。今回はWordPressを始めようと思っている初心者にありがちな間違いにフォーカスをしてみます。 今回はWordPress.comの話です。「WordPressでブログを作った...

サーバーを借りる

WordPressはこの辺の初期設定だけ面倒ですが多分30分もあればできますよ。クレジットカードだけ用意しておいてください。

やり方はこの辺を参考にしました。

WordPressで安全・快適なサイトを作るためのレンタルサーバーの選び方|CrossPiece
WordPressでサイトを作るには、事前にいろいろと準備するものがあります。このページではもっとも肝心なWordPre

ということでサーバーはエックスサーバーでプランは「X10」。とりあえずチキンなので最初は6か月のプランにしちゃって7000円くらい。来年2月までですね。今なら思う、もっと長くてよかったなと(笑)3年で32400円。めっちゃ損した気分です(笑)次は必ず3年で更新します。

初心者でも迷わない!エックスサーバーでWordPressブログを開始するまでの完全ガイド
ドメイン取得からWordPress設定まで手順実際にでWordPressサイトを始める手順を紹介します。お試しで申し込みを行うのサイトにある「お申込みはこちら」をクリック「10日間無料お試し 新規お申

このサイトが詳しいです。なかなか難しそうですがとりあえずこういうサイトの言う通りにしていけば問題ないと思います。

レンタルサーバー 高速・高機能・高安定性の【エックスサーバー】
高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。月額990円(税込)か...

エックスサーバーのサイトはこちら。

ドメインを取得する

次はドメインです。ドメインはこちらで。

ドメイン取得は最安値0円~|ドメイン取るならお名前.com
お名前.comは国内最大級のドメイン公式登録サービスです。ドメイン登録実績3500万件を超えました。人気の.com .net .jpドメインを含め630種類のドメインを取り扱っております。

こちらでsoil19.comのドメインを取得しました。取得費用1000円くらいやったかな。毎年更新料がかかります。(適当ですみません。)

進学塾ソイルができるまで(1)「塾名決定!の巻」
そいる塾長 どうも、(今はまだ存在しない)進学塾soilの塾長です。 今回は塾名についてのお話。 (もちろんこのブログには塾名がデカデカと表示されているので結果はもうおわかりだとは思うのですがまだ決ま...

一応塾名は考えていたのですがこのドメイン名をとるためにここで確定させました(笑)私と同じく開業前の方はここでちゃんと塾名なんかは考えておいた方が良いかなと。「301リダイレクト」とかで対処はできるかもしれませんが。

このあとちょっとひと手間必要です。

お名前.comで取得したドメインをエックスサーバーで使うための設定方法
お名前ドットコム(お名前.com)で取得した独自ドメインを、エックスサーバー(Xserver)で使えるようにするための設定方法を紹介します。ドメインとサーバーを関連付け(紐付け)るためには、それぞれの...

このサイトに沿ってサーバーとドメインを関連づけたら最初の難関突破です。

エックスサーバーのページからWordpressがインストールできますのでとりあえずこれでWordPressスタートですね。ログインしてみましょう。

こんな感じになるかなと。なんかこのページのテーマ色も変えることができます。特にこの色にしている意味はありません(笑)

WordPressの初期設定

とりあえずアクセス解析などの初期設定をしました。Googleアナリティクスサーチコンソールの登録ですね。プラグインで割と簡単にできます。

WordPressはプラグインで様々なカスタマイズができるようになっています。

有料のものもありますが私は無料のものしか使っていません。ということで下記サイトなんかを参考にしながら最初にいれたプラグインを紹介しておきます。

パーマリンクやサイト名などWordPressの初期設定をする|CrossPiece
この記事ではWordPressをインストール後、最初にやっておくといい初期設定についてお伝えします。プラグインを使って設

プラグイン①【All in One SEO Pack】

まず最初に入れたプラグイン。こちらで基本設定は簡単にできます。ただなんでその設定が必要かは理解しておらず下記サイトなどで言われるがままやっただけです。勉強においてはこういう姿勢は良くないですね^^;

追記:COCOONユーザーには不要です。こいつは入れない方がいいですね。

プラグイン② Google XML Sitemap

これ使ってGoogleサーチコンソールにサイトマップを送信するとなんかいいことあるそうです(笑)

プラグイン③ Akismet

こちらはスパム対策。お守りに入れておきました。

プラグイン④ WP Multibyte Patch

これは最初から入っているプラグイン。日本語入力に関するやつみたいなのでとりあえず有効化ボタンをポチっと。

プラグイン⑤ BackWPup

とりあえずデータが飛んだりしたら泣くしかないのでバックアップのためのプラグインを。

テーマをインストール

この辺の作業が終わったらいよいよテーマをインストールです。いろいろ試すのも面倒ですし、ネットで評判が良かったCocoonにしました。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

正直無料でここまでできるのかという驚愕レベルです(他のテーマを知らないくせに言ってみた笑)

とりあえず結論から申しますと私のサイトはこのCocoonの標準機能で出来ることしかやっていません。つまりCSSだPHPだのといった専門知識はほとんど使っておりません。ボタンをポチポチするだけで大概いけます。

無料テーマCocoonでやったこと。

とりあえずCocoonの設定でやったことを書き出してみますね。

ここで全体のテーマカラーとかヘッダーの画像とか設定します。

吹き出しをつくる。

そいる塾長
そいる塾長

これもCocoonの標準機能。好きな画像で作れます。

スキンを変更する

これに気が付いたのが最近でして( ;∀;)

まず最初にhタグと言われる見出しを変更しようと思ったんです。ちゃんと調べず前のブログで経験があったのでCSSをいじって好みの見出しにしたんです。

初心者がWordPressで遊ぶ(2)「見出しをカスタマイズするの巻」
そいる塾長 どうも、進学塾SOILの塾長です。 まだ教室がないので子どもたちに向けて勉強について熱く語ることができず残念。 それに早く自分の教室を創っていきたいところですが実物(箱)がないので、このサ...

ところがこのスキンを変更すると簡単に今の状態になりました。たまたま私が使っていた見出しとほとんど同じ形の見出し、テーマカラーも近いスキンがあったので、最初からこれに気が付いていれば無駄な労力を使うことはなかったなと。

私が選んだのはミックスグリーン [作者: y.hiroaki]というスキンです。これをポチっとすると今の感じになります。

Cocoonスキン『ミックススキン』の特徴
以前からやろうと思っていた、ミックスシリーズ(ミックスグリーン、ミックスブルー、ミックスレッド)のアップデートがようやくできました!ミックスシリーズの特徴を書いてみます。サイドバーの上に「スキン切り替...

それ以外にもいろいろありますが、好みに応じてぽちっとすると初心者には絶対できそうにないクオリティのサイトに仕上がります。

なおこないだ私がTwitterではしゃいでた記事のリンクがPCでカーソルを乗っけるとふわっと浮くのもこのスキンの標準装備。

こういうのはCSSをいじくってもできますがこれだと何もしなくて良いので楽ちんです。

style.cssでやったこと

ここに関しては「CSSって何?」という人はまったくやる必要ありませんのでスルーしてくださいね。

私も本当にほとんどやってません。やったものといえばそれいる?的なものばかり。(トップページのアイコンが動くとか…^^;)

なお、これは「難しいことは分からない!」という方は全くやる必要ないので

とりあえずコードを書く(コピペする)にあたってはCocoon内にstyle.cssを変更するエディタ機能はついていますが、なんかここでやるのは危険だよっていろんなサイトで書いてあったのでFTPソフトでやるようにしました。FTPソフトならバックアップも簡単だしもしも404エラーが出たとしてもすぐに修正できます。

実際私もおかしなことをしてしまい一度これが表示されて焦りました(゚Д゚;)

もっと怖いのが下手するとWordpressの画面が真っ白になることがあるんだとか。聞いただけで怖い(゚Д゚;)そんなときはFTPソフトでしか修正できません。(だそうです)

ということでFileZillaを導入。

【FileZillaの使い方】WordPressでFTPソフトを使おう
「FTPソフトとは何?」というところから「WordPressでFTPソフトを使うメリット」「FileZillaの使い方」まで詳しく解説します。初心者の方向け。

ついでにテキストエディタをSublineに。

Sublime Text 3 - Sublime Text

どちらもネットでなんかいいよってことで(笑)そもそもほとんど使っていないのでまだ良さも何もありません(笑)

以下一応CSSで書いたものというかコピペしたものとそのコピペ元のサイトを。

hタグ(見出し)

なおどうでもいいこだわりですがh1タグ(記事タイトル)はこのサイトのCSSのコピペです。

CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 | 第0版
ブログをお持ちの方必見! スタイルシートをコピペするだけでOKな、シンプル可愛い見出しを作成しました。 ※アイキャッチ画像では10個になってますが、徐々に増えて現在19個あります。...