スポンサーリンク

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

WordPressで遊ぶ
そいる塾長
そいる塾長

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

 

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

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

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

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

 

まずはWordpressを始める。

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

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

ゼロから始める!WordPressの使い方【初心者向けの入門講座】|CrossPiece
WordPressをこれから始めたい!そんな方のためにサーバーの選び方やドメインの取り方からインストール、そしてWordPressの使い方をステップ式で解説。ひとつずつ進めていくだけでWordPressが使えるようになる初心者マニュアルです。

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

初心者にありがちな間違い!WordPress.orgだと思ってWordPress.comで登録していない? | Pasolack-パソラック-
WordPressとWordPress.comの違い分かりますか?この2つは似て非なるものなのでWordPressを作ったと勘違いしている可能性があります。初心者にはありがちなので確認してみましょう。

 

サーバーを借りる

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

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

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

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

初心者でも迷わない!エックスサーバーでWordPressブログを開始するまでの完全ガイド ’2018
このページではエックスサーバーでドメインの設定及び反映、WordPressをインストールしてブログやサイトを開始できるま ...

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

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

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

 

ドメインを取得する

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

ドメイン取るならお名前.com | 国内シェアNo1
お名前.comは “国内シェアNo1”※のドメイン公式登録サービスで、1円からドメインを登録することができます。登録実績は1900万件を超えました。人気の.com .net .jpドメインを含め550種類以上のドメインを取り扱っています。ドメイン登録は早い者勝ち。第三者に取得される前にまずは検索を!(※自社調べ)

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

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

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

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

お名前.comで取得したドメインをエックスサーバーで使うための設定方法
お名前.comで取得したドメインをエックスサーバーで使えるように設定する方法を紹介します。ドメインとサーバーを関連付けるために、それぞれの管理画面で設定変更する必要があります。 お名前.comで取得したドメインをエックス …

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

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

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

 

WordPressの初期設定

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

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

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

パーマリンクやサイト名などWordPressの初期設定をする|CrossPiece
この記事ではWordPressをインストール後、最初にやっておくといい初期設定についてお伝えします。プラグインを使って設定するところが多いのですが、SEO的に大事なところなので頑張りましょう! 作業内容としては、 パーマ

 

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

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

プラグイン② 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のスキンがボタン1つでリアルタイムに切り替わります
下のボタンを押すと、リアルタイムでスキンを変更できます!※ページをリロードすると、スキンが適用されていない元の状態に戻ります。ミックスレッドミックスグリーンミックスブルーサムライブルー(勝色モデル)サムライブルー(無印)ミックスグリーン(改

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

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

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

 

style.cssでやったこと

ということで本当にほとんどやってません。やったものといえばそれいる?的なものばかり。しかも全部コピペです(笑)

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

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

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

ということでFileZillaを導入。

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

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

Download - Sublime Text

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

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

hタグ(見出し)

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

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

ちょっと女子力を高めようとしてみました(笑)

たまたまh2~4はスキンと同じかたちにしてましたので問題なかったんですが、h5だけなんかCSSとスキンのコードが干渉しておかしなことになったのでCSSを削除してスキンのほうを優先しました。

最近ちょっとこの見出しを変えたくなっているのでこの辺は勉強して何とかしたいなと。

プロフィール

【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ!!
CocoonでプロフィールボックスのデザインをTwitter風にオシャレにデザインするCSSカスタマイズです。コピペで使えます。

こちらのサイトを参考に。というかCSSをコピペ。

 

 

その他細かいところを色々

といってもほとんどいじっていません。

やったのはAmazon商品リンクショートコードをボタン一発で作成するブックマークレットの設定。

CocoonのAmazon商品リンクショートコードをボタン一発で作成するブックマークレットを作った
CocoonのAmazon商品紹介用ショートコードを自動作成するブックマークレットを作りました。カエレバやヨメレバのかわりにCocoonの機能を使う人は便利かと思います。

Googleアドセンスの登録と設定。これもCocoonの設定で簡単にどこに広告を置くか簡単に変更できます。

無料テーマCocoonのカスタマイズ注意点【広告・アドセンス編】
最近Stinger8からWordPress無料テーマ「Cocoon」に変更しました。Cocoonはかゆいところに手が届くと言っていいほど、便利な機能が搭載されています。今まではCSS等を使って、カスタマイズをしていましたが、このCocoon

この辺を参考に。

プラグイン⑥ WP-Appbox

なおほとんどやる機会はないないですがアプリの紹介はこのプラグインで。

こんな感じになります。

なおこのアプリ、私がロゴとかブログのアイキャッチ画像を作っているアプリです。せっかくだからまた載せておきますね。

進学塾ソイルができるまで(11)「塾のロゴをつくって遊ぼう」
そいる塾長 どうもそいる塾長です。 (ちょっと前からこっそりアイコンが変わっております。) ああ、いよいよ独立に向けて後には引けない状況に…。 毎日...

こちらの記事で一度紹介したやつです。

※上の記事で日本語フォントが使えないと書いてしまいましたがちゃんと、こちらのアプリ内で日本語フォントもインストール可能でした。お好きなフォントでテキストも作れますね。ということで現在はこちらのアプリでほぼすべてのロゴとブログのアイキャッチ画像は作っています。
こういうのがこのアプリだけで作成可能です。素材は別のアプリからとってきたり、ネットの無料素材を使っったりしてますが基本イラストレーターなどは一切使っていません。

最近、同業の先生からたくさんどうやってロゴとか作ってますか?という質問をたくさんいただいたので再度ご紹介しておきます。

突然表示速度が気になって…

初心者がWordPressで遊ぶ(1)「突然のブログサイト高速化作業」
そいる塾長 どうも進学塾soilの塾長です。 今日、講習の合間の休憩時間にWordPressについて色々調べてましたら、こんなサイトを見つけまし...

なんか表示速度が気になって遊んでた時の記事です。

プラグイン⑦ Autoptimize

こちらは表示速度を高速化してくれるプラグイン。

早くなったのかどうか正直わかりませんが入れておいて損はないかと。

プラグイン⑧ EWWW Image Optimizer

画像の最適化するためのプラグイン。これででっかい画像をボタン一つで適正化。

ただこのプラグインのせいなのかちょこっと画像がアップロードできなかったりする場合があるような。プラグインを停止すると治ります。どうなんでしょう?別のプラグインを考えた方がいいのかな?

 

前ブログから記事を移行

前職の時代に書いた記事は”ありがたいことに”すべて消すよう指示されましたのですべてちゃっかり移行させていただいております。

プラグイン⑨ Blogger Importer Extended

名前の通りBloggerの記事をこれでポチっとすればすべて下書き保存の状態でWordpressへ移行できます。ところどころ手直ししないとレイアウトとか崩れている部分はありますが、どうせ手直ししまくってるので問題ありません。

 

サイトのトップ画面ページを変更

2か月近くトップページは変更せず記事が新着順にならぶインデックスページをトップページにしていましたが、これから塾のホームページを作っていくにあたりトップページを作る練習のため固定ページを作成してみました。

初心者がWordPressで遊ぶ(3)トップページをカスタマイズ
そいる塾長 どうも、そいる塾長です。 今日は誰も興味のないであろうこちらのサイトの改造がテーマです(笑) さてこちらのブログ。WordPressに移行して...

この記事でも書きましたがこちらのサイトを参考にコピペしただけ。

【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』   こう言い放ちWordPressテーマ界に殴り込みをかけたC…

 

↑記事内でリンクを貼っていただきました。ありがとうございます!

コピペした状態からいろいろいじくりましたが別に何か難しいことをしたわけでなくあくまでCocoonの標準機能でショートコードをつかったりカラムを変更しただけですのでこれくらいならレイアウトは簡単に設定できますよ。

あとメニューを作って、そこにプライバシーポリシーを。なんか載せておく方が良いと書いてあったので固定ページを作りネットからのコピペで。

プラグイン⑩ Page Builder by SiteOrigin

このプラグインはサイトのレイアウトを直感的に作っていくことができるプラグイン。さきほどのリンク先でも紹介されたのでインストールしてみました。塾のホームページを本格的に作る際はこれを使ってみようかなと思っていますが今はまだ全く使っていません。

プラグイン⑪ Contact Form 7

これ今は全く必要ないんですが一応お問い合わせフォームを作ってみました。このプラグインを使えばポチっとするだけで簡単にできます。

 

プラグイン⑫ Smart Slider 3

今のところこれが一番最後に入れたプラグイン。トップにスライドショーのウィジェットが設定されていてかっこいいなと思ったので、真似してみました。しかしそもそもスライドさせるものがないので仕方なく今は各カテゴリーのリンク画像をスライドさせています^^;

将来的にはホームページのトップページに設置して教室写真や生徒の笑顔の写真なんかでスライドさせたいなと企んでおります。

今は全く不要な感じなのでそのうちいったん外すかもしれません。

大体10分で設置できる!「Smart Slider 3」でレスポンシブ対応したコンテンツスライダーを作ってみよう! | インクループ株式会社|神奈川県相模原市 ホームページ制作、WEBマーケティング
今回は便利プラグインの一つ「Smart Slider 3」を使って簡単にコンテンツスライダーを作る方法を記載します。なんと、このコンテンツスライダーは標準でレスポンシブ対応していますので、別途CSSの設定をする必要がない素晴らしいプラグインなのです!大体10分で設置できます!

このサイトを参考に作ってみました。

 

これからやりたいこと

ここまでやったことを超適当に書いてみました(笑)プラグインは12個。参考にならないかもしれませんが自分のメモとして残しておきます。そのうち何をどういじくったか忘れそうなので。

で、今後やっていくことですが、やはり塾のホームページを作っていく作業ですね。ホームページとなるとやはりもう少しかっこよくしたいわけですがなかなか素人には難しい。業者さんに頼むのも手ですができる限りは自分で作りたいかなと。

今は各ページのコンテンツのほうを作っているのでそれが完成次第レイアウトなんかを考えていきたいなと。

 

面白いプラグインを発見

いくつかやってみようと思っていることをメモっておきます。

FAQセクションを作成

FAQセクションを追加することができるプラグイン。ARCONIX FAQというプラグインがよさそう。

地図を埋め込む

Simple Mapというプラグインもあるみたいですが、別にプラグインを使わなくても行けそうですね。何より早く住所を決めたい。

会員専用ページ

前々から描いていたもの。こないだ見学させていただいたSakura塾さんでも中をみせていただき、ますますやりたくなってます。

WordPressプラグインZEBLINE
WordPressプラグイン「 ZEBLINE」の公式サイトです。ブロガー、アフィリエイターの「これがあったらいいな」という要望から作り上げました。

こちらのプラグイン面白いですね。買い切り3000円か~。

完全自己満足だけどもこの会員専用ページでやりたいことにいいなとも思うので前向きに検討しよう。

 

ま、こんな感じでぼちぼち作っていきます。知らないことをこうやっていろいろ調べながらやっていくの楽しいですね。大人のプラモデルと言われましたが想像以上に楽しんでおります。

 

今日はこのへんで!

コメント