toggle
2017-01-19

WordPress童貞がWebサイトを完成させるまで<後編>

海辺でPCを使う男性

さてさて。

WordPress童貞の諸君。

 

前回は「Wordpressの立ち上げから→テーマ選択→子テーマ作成」までを説明したけど、

今回はその後の「カスタマイズ」について書いていきたいと思う。

→前回のブログはこちら

 

まぁWordpress童貞のあなたは、カスタマイズって一言で言っても、

「何をカスタマイズせなアカンねんな。」って感じになるよね。笑

なぜなら俺もそうだったから。と言うか今でもそうかな。笑

 

だから、今回は「Webサイト」として機能する最低限の部分のカスタマイズにフォーカスして話していきたいと思う。俺が歩んできた道のりが、誰かのヒントになれば幸いです。

 

 

プラグインをインストール

まずはここから。Wordpressにはプラグインっていう便利なモノがあって。

いちいちコードを書かんでも色んな機能を追加することができるような、俺たちみたいなプログラミング初心者には最高の機能が搭載されてる。笑

 

ありがたや。

 

インストールの仕方は、

「ダッシュボード→プラグイン→新規追加」って流れで、

好きなプラグインを簡単にインストールすることができる。

 

個人的に必須と思ってるプラグインは、

・All in one seo pack

・TinyMCE Advanced

・Contactform7

 

この3つかな。俺は他にもインストールしてるけど、最低限必要なのはこれ。

 

All in seo packは、その名の通り「SEO対策」の為に必須のプラグイン。

TinyMCE Advancedは、記事投稿を簡単にしてくれるプラグイン。

Contactform7は、簡単にお問い合わせフォームを準備できるプラグイン。

 

最低この3つさえあれば、Webサイトとして機能する事は間違いない。

 

ただし、ここでそれを説明したら、一個で一つの記事分の文章量になってくるんで、この道のプロフェッショナルである「バズ部」様に教えてもらってくだされ。バズ部は最高でござる。

バズ部

 

ナビゲーションメニューを決める

ナビゲーションメニューってなんや?って簡単に言えば、

このサイトの上部にある「About,Service,Works,Blog,Contact」って表示されている部分がそれにあたる。

 

この部分は、最初にテーマを有効化した段階では、全くの表記されてないのね。

俺はなぜか表記されているものやと思ってたんやけど。アホすぎるな。笑

 

ここの設定の手順は、

・固定ページで各ページを準備する。

・メニューで構造を決める。

 

この2つさえクリアすれば準備できる。

一つ一つ説明していくぜ。

 

固定ページで各ページを準備する

準備の仕方はかなり簡単。

「ダッシュボード→固定ページ→新規追加」って流れで、編集のページに行ける。

 

このページまで飛べたら、あとは内容を決めるだけ。

 

一番上にある入力欄がそのページの題名になるから、

「会社案内」やら「ブログ」やら「お問い合わせ」やらそれに則した題名を決める。

 

そのあと、下の入力欄に必要な内容を明記していけばOK。

 

かんなり簡単でしょ。笑

 

ちなみに、最初の段階では「ビジュアル」の部分に「フォントサイズ」とかのメニューはないと思うけど、これは前述にある「TinyMCE Advanced」ってプラグインで設定しとります。これがなかったら俺は投稿すらできまへん。。笑

 

メニューで構造を決める

固定ページの準備ができたら、

あとはメニューで表示する順番とかを決めればOK。。

 

メニューは「ダッシュボード→外観→メニュー→メニューの編集」で設定することが出来る。

 

この左の項目にある「固定ページ」を開いて、任意のページを右側に当てはめていくだけで完成するって感じやな。

 

俺の場合は、「About,Service,Works,Blog,Contact」をナビゲーションメニューに設定したいから、それを当てはめたって事。でWebサイトに上から順番に左詰に設置されていくから、好みの順番に設定すれば完了。

 

これで「ナビゲーションメニュー」の設定はOKやね。

 

見出しについて

さて。

今までの流れで、もう外見はかなりWebサイト化してきたと思うけど、ブログに記事を投稿していかへんと、循環のない残念な寂しいサイトになってまう。これは避けたい。

 

で。文章を書き出して最初にぶつかる壁が「見出し」ってやつやと思う。

これがまたクセ者なんよなー。俺たちWordpress童貞からしたら。笑

 

見出しのカスタマイズ

まずはカスタマイズから。多分、見た事あると思うけど。

 

見出しって、みんなオシャレにデザインしてるわけ。

でも、これって最初は大文字でしか表示されへんのよね。

それやったら表情がないし、面白くない。

 

 

で。そのためには上の画像のように「カスタマイズ」せなアカンわけよ。

こいつとの戦いは壮絶やったぜ。笑

 

それを助けてくれたのが「Free Time Network」っていうサイト。

この人の説明は半端なくわかりやすい。バカな俺でも「見出し」を設定することができたのは、このサイトのおかげ。笑

Free Time Network

 

はっきり言って、何がなんか分かってなくても、

「見出し」のカスタマイズはできるよ。ざっくり言うとコピペでOKって事。笑

 

見出しの順番

最後に「見出し」の順番について。

これって意外と見落としてしまいがちなんやけど、

ここでミスると「SEO」的に残念な結果になるらしい。

 

見出しって、

「見出し1、見出し2、見出し3・・・・・」って感じで順番があって、

その順番を間違えたり、ルールとは違う事をしてしまうとサーバー側が上手くクロールしてくれへんらしい。クロールってなんやねん。って話なんやけど。笑

 

まぁややこしい話は置いといて、

「SEO」的によろしくないって感じで捉えてほしい。笑

 

まぁ「SEO」がなんなのか、

イマイチよく分かってないんやけど。笑

 

見出しの順番(正解例)
見出し2

テキストテキストテキスト

見出し2

テキストテキストテキスト

 見出し3

 テキストテキストテキスト

見出し2

テキストテキストテキスト

 

こんな感じで、「見出し2→見出し2→見出し3→見出し2」って流れなら問題はない。

で。見出し1」は基本的には「タイトル」で使ってるんで、文章内には含まない方がいいらしい。

なんか「見出し1」は1記事につき一つって決まってるんだとさ。

 

この表を見ても多分、何が正解で何が間違いか分からんと思うんで、

以下の失敗例を見てほしい。

 

見出しの順番(失敗例)
見出し1 ←大体のテーマでは見出し1」は既に記事のタイトルで使ってるから使わない。

テキストテキストテキスト

 見出し3 ←最初に「見出し3」が来ることはない。普通、最初の見出しは「見出し2」。

 テキストテキストテキスト

見出し2

テキストテキストテキスト

見出し2

テキストテキストテキスト

 

失敗例はこんな感じかな。

他にも「見出し2→見出し4→見出し2」とかもアウトらしい。

 

まぁ要するに「正しい順番で見出しを使ってくれ」って事。

あのGoogle殿下のクロール君を混乱させへんために。笑

過保護な奴め。

 

▽補足

「見出し1」が自分の使用してるテーマで、実際にタイトルで使われてるかどうか確認したければ、その記事のプレビューか、自分が書いた過去の記事まで飛んで、「表示→開発・管理→ソースを表示」で確認できる。

 

Macを使用している人は、そのソースを表示させたら「Command+F」で「h1」を検索かけたらすぐに見つける事ができるはず。

 

最後に

WordPress童貞の旅もここまで。もう童貞じゃないと断言してもいい時期やろうし。笑

ここまできたら、あとはその運営を続けていくだけですな。

 

WordPressは奥が深いから、俺もまだまだ分からへん部分がアホみたいにあるし、

戸惑う部分もめちゃくちゃあるけど、随時ググって問題解決していけばなんとかなる。

「根性・根気・粘り強さ」で共に乗り越えようぜ。結局最後はそれ。

 

最後まで見てくれた人はありがとう。

 

WordPress童貞万歳!!!

 





関連記事