WordPressのとりあえずこれだけやっておけ設定（初心者向け）

投稿者: | 2017/07/03
0件のコメント

WordPressを初めてインストールしてログインしたとき、管理画面の設定項目の多さや聞きなれない単語の多さ、またサイト自身の初期画面のオシャレ感に面食らって、「フツーのブログを書きたかっただけなのに・・・」と途方に暮れたのは、きっと私だけじゃないはず、、、と思いたい。

画面いっぱいに広がるおしゃれなヘッダー画像を用意するなために、一眼レフ抱えて写真を撮りまわるところから始めなくちゃいけないの？サイトを開いた瞬間から挫折しそうです。

日本で有名なブロガーさんたちを見る限り、デザインのための画像は少なく、記事の内容で勝負！という、すっきりした（それなのにちょっとオシャレな）構成になっているサイトが多く、自分もそれに触発されて「こんなブログを作れたら良いなぁ」と思ってたどり着いたのがWordPressでした。

それなのにオシャレ全開のデフォルトテーマ。

ここからすっきり、かつ機能的で見やすいサイトに変更するために「とりあえずこれだけやっておけ」と思うものをまとめました。

デザインに凝りたい人やSEO対策をばっちりやりたい人は、他の詳しく書いてあるサイトを見ていただくとして、ここでは「細かいことは良くわからないし、さっさと書きやすいブログを作りたい」という人向けの方法を紹介しています。

こんなサイトが、こんな風に変わります。

 

それでは実際の設定を始めましょう。

この記事でできること

  • シンプルな見た目（ヘッダー、本文、サイドバー）
  • facebookのいいね！やTwitterのツイートボタン
  • 投稿記事に目次を追加
  • アップロード写真に透かし文字を入れる
  • サイトの統計情報を確認
  • 記事投稿の際にTwitterにツイート

パーマリンクの重要性と設定

いきなり設定作業の手順とは離れてしまいますが、ブログを運営していく上でどうしても避けて通れないことなので、これだけは真剣に考えておいてください。

パーマネントリンクとは、ブログに投稿した記事にアクセスするURLのことです。このサイトでは「http://beelabo.com/カテゴリ/記事ID」を使っています。

これの何が重要かというと、ブログの運用途中でカテゴリ見直しやサーバ移転をしてURLが変わってしまうと、TwitterのツイートやFacebookにシェアをしてくれた数がリセットされたり、ブログで記事を紹介してくれたリンクが無効になってしまったり、せっかく他の誰かが記事を紹介してくれたことが無駄になってしまうんですね。実はサイト名を変更するより、URLを変更するほうが影響力が大きいです。

自分のブログ内のリンクが切れてしまったり、サーバ移転の時に投稿IDがズレて大変になったりするという問題などは力技で何とかなりますが、他の人からのアクションを自分でリカバリすることはできません。

パーマリンクの検討

難しいことはどうでも良い！面倒なことを考えたくない！という人は「投稿名：/%postname%/」を使うと良いです。きちんと考えたい人は、パーマリンクについて論じているブログがたくさんありますので、いろいろと読んで自分に合ったものを探してみてください。%post-id%を使うなって言う人もいれば、推奨している人もいて、なかなか興味深いです。

パーマリンクを設定する

  1. 管理画面→設定→パーマリンク設定
  2. 共通設定に、基本、日付と投稿名、月と投稿名～などの項目が並んでいます。この中に使いたいものがあれば、それを選び、気に入ったものがなければ、カスタム構造を使って自分で指定します。

確認用の投稿を作成する

いくつか投稿がないと、実際に運用したときのイメージがわきません。次のテキストをコピーして、２，３個の記事を作成しておいてください。また、適当な写真があれば、サンプル用に記事に掲載しておくとわかりやすいです。

  1. 管理画面→投稿→新規追加
  2. エディタのテキストを選択して、以下をコピペで記載する 
    
<div style="word-wrap: break-word;">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
<h1>見出し１のデザイン</h1>
012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
<!--more-->
<h2>見出し２のデザイン</h2>
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
<h3>見出し３のデザイン</h3>
<ul>
 	<li>番号なしリスト１</li>
 	<li>番号なしリスト２</li>
 	<li>番号なしリスト３</li>
</ul>
<h2>見出し２のデザイン</h2>
<ol>
 	<li>番号付きリスト１</li>
 	<li>番号付きリスト２</li>
 	<li>番号付きリスト３</li>
</ol>
<h3>見出し３のデザイン</h3>
ああああああああああああああああああああああああ
<blockquote>引用のイメージ</blockquote>
ああああああああああああああああああああああああ
<h3>見出し３のデザイン</h3>
ああああああああああああああああああああああああ

<a href="http://beelabo.com">http://beelabo.com</a>

ああああああああああああああああああああああああ
</div>
  3. エディタのテキストを選択して、メディアを追加→公開
  4. 同じ手順で3つほど記事を作成する

見た目をスッキリさせる＋SNSのシェアボタンを追加する

WordPressの全体的なイメージは、使用するテーマで決まります。Simplicity2というテーマは使用している人が多くカスタマイズ方法をネットで検索しやすいほか、SEO対策もできるので、非常に使い勝手が良いテーマです。ここではSimplicity2の設定を説明します。SimplicityはWordPressのテーマ追加画面では検索できないので、公式サイトからファイルをダウンロードして使います。

Simplicity2と子テーマをダウンロード

  1. https://wp-simplicity.com/ にアクセス
  2. 右のサイドバーから、「Simplicity2」にアクセス
  3. ページ中部、「Simplicity*.* 安定板」 から最新のものをダウンロード
  4. 右のサイドバーから、「Simplicity2 子テーマ」にアクセス
  5. ページ中部、「子テーマ（無印）」 をダウンロード
ダウンロードしたファイル(*.zip)は解凍しないでください。zipファイルのまま使います。

Simplicity2のアップロードと適用

ダウンロードしたテーマをWordPressにアップロードして適用します。

  1. 管理画面→外観→テーマ→新規追加
  2. テーマのアップロード→ファイルを選択→ダウンロードした「simplicity2.*.*.zip」を指定→今すぐインストール
    この時点ではテーマを有効化しません。次の手順の子テーマを使います。
  3. テーマのアップロード→ファイルを選択→ダウンロードした「simplicity2-child*.zip」を指定→今すぐインストール→有効化

テーマにスキンを適用

画面全体のカラーイメージを設定します。

  1. 管理画面→外観→カスタマイズ
  2. スキン→好きなものを選択（画像はラージピクチャーヘッダーを使用）
  3. 保存して公開→左上の「＜」で戻る

SNSのシェアボタンのカスタマイズ

TwitterやFacebookでシェアしてもらうためのボタンをカスタマイズします。

  1. 管理画面→外観→カスタマイズ
  2. 右のプレビュー画面で、サンプル記事を開いておく
  3. SNS→シェアボタンの表示/非表示や、ボタンのデザインなど、プレビュー画面を見ながら好きなように設定する。
  4. 保存して公開→左上の「＜」で戻る

外部ブログカードの設定

http://~とブログの中にURLを書くだけで、リンク先のイメージやキャプションを読み込んで、次のように表示できる設定を行います。

Simplicityのブログカードの使い方と注意点

  1. 管理画面→外観→カスタマイズ
  2. ブログカード（外部リンク）→ブログカード有効をチェック
  3. 保存して公開→左上の「＜」で戻る
プレビュー画面ではすぐに設定が反映されないことがありますが、保存後に実際のサイトを何度か再読込すると表示されます。

投稿ページに目次をつける

最近、Howto系のブログでよく目にするこの目次を追加します。

プラグイン：Table of Contents Plusを追加

  1. 管理画面→プラグイン→新規追加
  2. プラグインの検索で「Table of Contents Plus」を検索
  3. Table of Contents Plusの今すぐインストール→有効化
  4. Table of Contents Plusの設定→基本設定
  5. 以下のコンテンツタイプを自動挿入→postにチェック
  6. 上級者向け→表示→見出しレベルのh2とh3以外はチェックを外す
  7. 設定を更新
h2とh3以外のチェックを外す理由
WordPressで記事を書くとき、見出し１（h1）はタイトル部分と同じスタイルになってしまうため、見出し２（h2）からしか使用しません。また、見出し４（h4）以降も目次に含めてしまうと、目次部分がかなり長くなってしまうため、h4以降を除外しています。お好みで使い分けてください。

サンプル記事で表示を確認

最初に作成したサンプル記事を開いて、どのような目次が作成されているかを確認してください。

アップロード写真に透かし文字を入れる

写真や図をアップロードする際、自動で透かし文字を入れられるプラグインを追加します。この記事の中のキャプチャの右下にも「BeeLabo」とうっすらついています。私がいくつものプラグインを試したところ、Easy Watermark が一番簡単に使えたので、その設定方法を紹介します。透かし文字を入れなくても良い人は、この手順をスキップしてください。

プラグイン：Easy Watermarkを追加

  1. 管理画面→プラグイン→新規追加
  2. プラグインの検索で「Easy Watermark」を検索
  3. Easy Watermarkの今すぐインストール→有効化
  4. Image Sizesの設定→Thumb以外のすべてにチェック
  5. Easy Watermarkの設定→General
  6. Watermark Type→Textに変更
  7. Jpeg Quality→100に変更→変更を保存
  8. Textタブ→Watermark Textと書かれているところに、自分の名前orサイト名など好きな文字を入力
  9. Text Aligment→文字を表示させたい場所を選択
  10. Text Offset→x:10、y:10と入力
  11. Font→好きな文字を選択
  12. Text Size→小さめが良いなら12、大きめが良いなら24くらい
  13. 変更を保存

テスト投稿をして、透かし文字を確認

  1. 管理画面→投稿→新規追加
  2. メディアを追加→適当な写真をアップロードする（既存の写真は使わないでください）→投稿に挿入
  3. ページ下部にある「アイキャッチ画像を設定する」から、今アップロードした写真を指定→アイキャッチ画像に設定→公開
  4. 投稿を表示でページを開くと、写真に透かし文字が入っているのを確認できます。

サイトの統計情報を確認＋Twitterに自動投稿

WordPress謹製のプラグイン「JetPack」を使うと、サイトの統計情報を確認できるようになります。スマートフォンのWordPressアプリもこのプラグイン利用を推奨しているので、入れておくと便利です。

プラグイン：Jetpack by WordPress.comを追加

  1. 管理画面→プラグイン→新規追加
  2. プラグインの検索で「Jetpack」を検索
  3. Jetpack by WordPress.comの今すぐインストール→有効化
  4. WordPress.comと連携→Register
  5. メールアドレス、ユーザー名、パスワードを入力→Sign Up and Connect
  6. Jetpack→Approve
  7. Jetpackの色んなプランが表示されますが、左端のFree Planを選択

左のメニューにJetpackのメニューが追加されるので、ここからサイト統計情報を確認できるようになります。すぐにアクセスすると「気楽にいきましょうよ。」など言われちゃいますが、しばらく待ってからアクセスするときちんとグラフが表示されます。

Twitterの自動投稿設定（要SNSアカウント）

新しい記事を投稿したとき、自動的にTwitterに新着記事をツイートしたいときに設定する機能です。不要な場合はこの手順をスキップしてください。

  1. 管理画面→Jetpack→設定→Sharing
  2. 投稿をソーシャルネットワークに自動共有→ソーシャルメディアアカウントを接続する※WordPress.comの管理画面に移るので、以降の作業はWordPress.comの設定です
  3. FacebookやTwitterなど、自分が持っているアカウントをそれぞれのSNSのConnectボタンで設定する。
  4. 設定した情報は、WordPress.comに保存されます。
  5. 元の管理画面に戻りたいときは、ブラウザの戻るボタンを使ってください。

以上で設定は完了です。テーマやプラグインの細かい設定は実際にいじりながら、自分のイメージに合わせてください。
手順の中で作成した記事や写真は、設定作業が終わったところで削除してください。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。