カテゴリー: WPの基礎

  • 【重要】WordPressテーマをカスタマイズするなら子テーマを作れ!

    ちょっと前の話題になりますが、WordPress が 3.4 にバージョンアップしてまして、デフォルトで入っているテーマ、Twenty Eleven もバージョンアップしたようです。
    で、Twenty Eleven を 1.4 へとバージョンアップしようと思ったのですが、なんか怪しい・・・。そう、今まで Twenty Eleven を直接いじっていたものだから、バージョンアップすると上書きされてカスタマイズした内容が全て消えてしまうのです。
    じゃあバックアップ取ってから、アップグレードした後にスタイルシートだけもう一度上書きすればいいか〜とも思えるのですが、実はもっとスマートな方法があるようです。WordPress のテーマをカスタマイズする際は本来こうしておくのが定石、基本だという方法があるのです。
    それが、

    子テーマを作る

    という方法。
    これ、基本。常識だそうですね。。。今まで Twenty Eleven を直接いじってましたよ。バージョンアップなんてそんなにないだろうと高をくくっていましたからね。
    ですが、今回みたいなアップグレードがある時にいちいち上書きされていたら修正が大変なので、効率的にも『子テーマ』を作った方がいいようです。なので、 Twenty Eleven のバージョンアップの前に、今らさらですが、子テーマへの引っ越し作業をしてみました。

    子テーマの基本

    まずは子テーマについて簡単にまとめておきます。
    子があるのだから親があるわけですが、まず親テーマとはあなたがカスタマイズしたいテーマのことです。ここでは Twenty Eleven としておきましょう。
    でもカスタマイズしたいといっても、テーマの 1 から 10 まで全て書き換えたいなんて思うことは少ないはずです。基本的には style.css と、functions.php と、あとページ用のテンプレートファイルが少々、、、といったところではないでしょうか?
    そこで、自分が書き換えたいファイルだけを寄せ集めたテーマフォルダを新たにつくって、そこで親テーマの変更したいファイルだけを上書きしてしまおう、というのが子テーマです。
    例えば、Twenty Eleven(フォルダ名 twentyeleven )の子テーマ、Child(フォルダ名 child )というのを作ります。そしてその子テーマフォルダの中に style.css というスタイルシートを作成すると、子テーマのスタイルで指定した内容が親テーマに反映されるというわけです。
    カスタマイズした内容は、全て子テーマである Child の中にあるので、親テーマである Twenty Eleven をアップグレードして上書きしたとしても、カスタマイズした内容はびくともしないのです。子テーマを構成するファイルもカスタマイズに必要な分だけなので、すっきりして扱いやすくなります。
    WordPressの親テーマと子テーマの関係
    これらの変更は、スタイルシートだけではなく子テーマ内にあるファイルが優先的に反映され、functions.php や、header.php など、親テーマを一切いじらずに好きなようにカスタマイズすることができます。

    子テーマの設定方法(とりあえずは CSS だけ)

    では実際に子テーマを作る方法ですが、これがあっけないくらいに簡単でした(といっても、ちょっとだけつまづいてしまいましたけど……)。
    まずは、子テーマ用のフォルダ(ディレクトリ)を用意しましょう。フォルダ名はなんでも構いませんが、ここでは【 child 】にしておきましょう。そしてこのフォルダは【 themes 】の直下に置きます。つまり親テーマである【 twentyeleven 】というフォルダと同じ階層ということです。
    子テーマのフォルダを作成

    子テーマ内にスタイルシートを作成する

    そしてこの【 child 】の中に【 style.css 】を 1 つ作成しましょう。そして以下のようにスタイルシートに記述します。

    /*
    Theme Name: Child
    Template: twentyeleven
    */

    とりあえず必須項目は上記の 2 点のみです。Theme Name は任意で付けてください。そして Template という部分は、必ず親テーマのフォルダ名(ディレクトリ名)にするようにしてください。Twenty Eleven を親テーマとする場合は【 twentyeleven 】です。
    子テーマを認識させるための必須項目は  2 点ですが、他にも Author とか Description とか、色々書いても OK です。
    子テーマのスタイルシートを作成

    子テーマが表示されない場合、もしかすると・・・

    これらの設定が済んだら、1 度 WordPress の管理画面(ダッシュボード)を見てみてください。外観のテーマ管理画面の中に、今作成した Child というテーマが表示されているはずです。
    子テーマの確認
    実は、素人すぎてここでちょっとつまづいてしまったポイントがありました。子テーマをアップしてもなかなか認識してくれなかったのですが、その原因はスペースの使い方でした。
    子テーマの CSS にテーマの名前( Theme Name )とフォルダの指定( Template )をしたと思いますが、ここの Theme Name: と Child の間、Template: と twentyeleven の間が全角スペースになっていると、子テーマとして認識してくれませんでした(「親テーマが見つかりません」みたいなメッセージが……)。
    全角のスペースを取っていた事が原因のようです。
    他にも、Template: で指定すべきフォルダ名に大文字が混ざっていたりするのも、認識できない原因になります(正確には、大文字どうこうより、フォルダ名通りであること。つまり Twenty Eleven ではなく、twentyeleven というサーバー上のフォルダ名を指定すること!)。

    子テーマを反映させる

    さて、無事テーマ管理画面で子テーマとして作成したテーマが表示されていたら、子テーマを【 有効化 】してみましょう。無事子テーマが利用中になったはずです。
    そしてブログを見てみると・・・
    子テーマ反映後のブログ
    なんと、レイアウトがめちゃくちゃです。
    それもそのはず、PHP などのテンプレートファイルは親テーマのものをそのまま使っていますが、スタイルシート( style.css )に関しては、先ほど子テーマの中にファイルを用意しましたのでこちらが適用されています。
    子テーマのスタイルシートには、まだ何も書き込んでいませんので、デザイン的な部分は簡素になってしまったわけです。

    親テーマの CSS をとりあえず読み込む

    スタイルシートは子テーマフォルダ内のものが適用されているわけですが、最初からスタイルを指定していくのは面倒です。ある程度は親テーマと同じスタイルを適用しておきたいはずです。
    いちいち全部をコピペしてもいいのですが、以下のように書いておくと、親テーマのスタイルシートをインポートしてくれます。

    /*
    Theme Name: Child
    Template: twentyeleven
    */
    @import url('../twentyeleven/style.css');

    ただ、ぼくの場合はもう既に親テーマのスタイルシートを結構いじっていましたので、全部コピペしました。
    基本的には、上記のような @ から始まる記述を 1 行入れて親テーマをインポートし、カスタマイズしたい箇所の id や class を確認して指定しなおすと、子テーマのスタイルが適用されるようになります。
    例えば、Twenty Eleven の場合、タイトルの文字に関して指定している id は【 #site-title a 】になりますので、子テーマのスタイルシートで【 #site-title a 】の文字色を赤に指定すると、タイトルの文字色が赤になるというわけです。

    /*
    Theme Name: Child
    Template: twentyeleven
    */
    @import url('../twentyeleven/style.css');
    #site-title a {
    	color: #f00;
    }

    これで子テーマのスタイルシートが適用されるようにしておけば、親テーマの Twenty Eleven をバージョンアップしても大丈夫です。
    他にも functions.php とか、各種テンプレートファイルの header.php や footer.php などを子テーマを用いる事で上書きできます。

    ただし、子テーマフォルダ内に functions.php を作成する場合は注意が必要です。以下の記事を確認してください。

    【注意】functoins.phpをWordPressの子テーマに追加する場合

    あと、子テーマフォルダの中にイメージフォルダ( images など)も追加し、その中に画像をアップロードするようにしておくと、CSS で画像を指定する際にイメージフォルダ内の画像を相対パスで指定できるので、便利がいいと思います。

  • 複数ユーザーでワードプレスを更新するなら知っておくべき権限や個別プロフィール表示など

    複数のライターでブログを運営したいと思ったことはありませんか?
    例えばニュースサイトを運営していて、記者ごとに記事を投稿できるようにしたい。
    自社のスタッフに交代でブログを更新させたい。
    自作自演で 2 〜 3 人のライターを演じたい(笑)
    などなど。。。
    さらにそれぞれのライターが投稿したら、記事の最後にライターごとのプロフィールが表示されるといいですよね!
    そんな複数人で運営するブログを構築する際に必要な基礎知識と設定方法をご紹介します。

    そもそもWordPressのユーザーにはどんなタイプがあるのか?

    ワードプレスを使っていると、ユーザー設定のプロフィールの部分で管理者とか購読者といった項目を見かけると思います。これらの区別によって、役割ごとにアクセスできるページが制限されていたり、設定・管理できる項目が制限されたりします。

    管理者

    全てのことができます。何も制限のない権限と言うことですね。他のユーザーが投稿した記事、コメントなど全てを管理・編集することができます。もちろん外観の編集・カスタマイズやプラグインの管理、各種設定全てを行うことができます。

    編集者

    結構いろんなことができます。編集に関わる作業は一通りこなせます。例えば記事の投稿・編集・削除、固定ページの投稿・編集・削除、コメントの管理などができます。
    しかも他のユーザーが投稿した記事やコメントの編集・削除の権限も与えられています。カテゴリの追加も許可されています。

    投稿者

    記事の投稿は可能ですが、それ以外はほとんど何もできません。固定ページの作成もできません。管理・編集も自分で投稿した記事のみに制限されています。

    寄稿者

    寄稿者の投稿画面できることと言えば、記事の執筆と、自分が執筆した記事の編集くらいです。
    「執筆」と表現したのには理由があります。この寄稿者の権限に関して投稿者のそれとの決定的な違いは、「投稿」ができないことです。記事は書けても、最終的にブログ上へ公開しようと思ったら、管理者か編集者の承認が必要になります。
    記事を書き終えたら、以下のような【レビュー待ちとして送信】というボタンをクリックするしかありません。
    一方管理者(or編集者)の管理画面では、以下のように「レビュー待ち」状態の記事が確認できます。この記事を管理者(or編集者)がチェックして【公開】ボタンを押せば、晴れてブログ上に寄稿者が投稿した記事が公開されるというわけです。
    レビュー待ち
    またメディアの管理もできません。記事に画像を使用しようと思ったら、直接アップロードして挿入はできないので、既にアップロードされている画像の URL を直接書き込むしかありません。
    つまり、表現の自由が許されず、検閲されまくりな残念なポジションというわけですね・・・。

    購読者

    その名の通り、購読しかできません。管理画面にログインすることはできますが、ログインしても自分のプロフィールの編集しかできません。
    購読者の管理画面
    購読しかできませんが、ユーザー登録をしていない人に比べると閲覧制限がかかった記事も見ることができるので、一般的には WordPress で会員サイトなどをつくる際に、会員さんをこの購読者として登録して活用されることが多いようです。
    限定記事などを定期的に書いて、固定ファンをつくる仕組みにも使えますね。

    複数ユーザーで記事を投稿・管理・編集するためには?

    さて、今回のテーマは複数のユーザーで記事を更新していくということでした。ライターさん複数人で日別やジャンル別に記事を更新していく、などの使い方をしたい場合どうしたらいいのでしょうか?
    まず、どの権限を与えるべきか? ということですが、記事の更新をするのであれば基本的に【投稿者】か【寄稿者】がいいでしょう。ただ、前述のように寄稿者は色々制限が多いので投稿者くらいがベストかなとは思います(ライターのレベル次第ではありますが)。

    権限を指定してユーザーを登録する

    ユーザーの管理ができるのは管理者の特権です。新たにユーザーを追加するには、管理画面のサイドメニューにある【ユーザー】から、【新規追加】をクリックします。そして必要事項を入力して新規ユーザーを追加します。
    WordPressユーザーの新規追加
    必要事項は最低限ユーザー名・アドレス・パスワード・権限の種類(初期設定は購読者)になります。
    WordPressユーザー新規追加画面

    (1) ユーザー名

    このユーザー名は後で変更することができないので注意してください。分かりやすいのはメールアドレスをそのままユーザー名にすることかなと思います。
    ブログの投稿者名として使用することもできるので、人目につく可能性も考慮しておいた方がいいかもしれません。
    ただ、、、セキュリティの視点から言うと、メールアドレスじゃすぐにバレてしまうので、やはり新たにユーザー名を指定する方がいいでしょう。少なくとも admin はやめといた方がいいですよ(笑)

    (2) メールアドレス

    こちらはいつでも変更ができます。追加するユーザーさんと連絡がつきやすいメールアドレスにしましょう。

    (3) 名前と姓

    姓名は必須事項ではありませんので、とりあえずは空欄でいいと思います。後で変更できるので、それぞれのユーザーさん自身に好きな名前をつけてもらえばいいと思います。
    ちなみにこの姓名も、ブログ上に表示される名前として使用できます。

    (4) ウェブサイト

    こちらも後で変更できるので、最初は空欄でいいでしょう。ユーザーさんごとに自分でプロフィールを編集してもらい、必要な人には追記してもらえばいいでしょう。

    (5) パスワード

    これも暫定的なパスワードで OK ですが、その場合はユーザーを追加した後に、ユーザーさん自身に必ず自分用のパスワードに変更してもらうようにしてください。
    また、会員サイトとして運用する場合などは、ユーザーに管理画面を見せないようにすることができるんですが、その場合はユーザー自身でパスワードの変更ができませんので、セキュリティに強いパスワードを設定しておいてあげましょう。
    上の図のように【強度インジケーター】の部分が黄緑色の “強力” になるようにしてください。

    (6) パスワードを送信しますか?

    書いてある通りですが、追加した新規のユーザーさんに対してユーザーとして登録したことを知らせるメールを送るかどうかの選択ができます。
    ユーザー名とパスワードが書かれた簡素なメールが自動的に送られます。
    WordPressユーザー追加の連絡メール
    十分知った間柄で事前に知らせているなら問題ないと思いますが、お客さんにいきなりこんなメールが届いたら失礼極まりないので、チェックは入れずに別途ちゃんとしたメールを送った方がいいでしょう。

    (7) 権限グループ

    ここでユーザーの権限を選べます。役割に合わせて最適なものを選んでください。
    先ほども言ったように、複数人で記事を投稿して行くという使い方なら【投稿者】で十分です。管理者が最終的に全ての投稿内容を把握した上で公開したい場合は【寄稿者】がいいでしょう。

    記事ごとに執筆者のプロフィールを表示させる -Twenty Eleven の場合-

    ユーザーが追加できたら、さっそく各ユーザーさんに記事を書いて行ってもらいたいところだと思いますが、そのままだと記事の下にちょろっと執筆者の名前が表示されるくらいで(その表示もデフォルトだとユーザー名のまま)、誰が書いたのか分かりにくいので、ユーザーごとのプロフィールが表示されるようにしましょう。
    Twenty Eleven を使用している場合、投稿した記事ごとに記事作成者の情報を公開するための条件は、

    (1) 複数のユーザーが記事を書いている
    (登録だけではなく、実際に複数ユーザーの記事が必要)(2) ユーザーの【プロフィール情報】が入力されている

    この 2 つです。
    単一ユーザーでの記事更新の場合、デフォルトではプロフィールは表示されません。1人なら別にプロフィールページをつくれば済むことなのでたぶん不要でしょう。
    そして、複数の執筆者がいる場合は、プロフィールページの【プロフィール情報】、ここに何かしら記入すれば OK です。逆に言えば、他の情報は入力していても プロフィール情報への入力が無ければ何も表示されません。
    とりあえず複数ユーザーがいる状態かつ複数ユーザーが記事を投稿している状態で、こんな感じでプロフィール情報を入力して記事を投稿してみると・・・
    プロフィール情報を入力
    こんな感じに記事とコメントの間にプロフィール(執筆者情報)が出現します。
    Twenty Elevenの投稿に執筆者情報が表示される
    執筆者の情報といっても・・・たいした情報は表示されないではないか!
    と思ったあなた、そうなんです。Twenty Eleven のデフォルトの設定なのか分かりませんが、連絡先情報とかを入力してもそれが表示されるわけではなさそうです。
    なので、実際はプロフィール情報の中にタグを使ってリンクさせるのが確実だと思います。プロフィール情報にはリンクタグ【<a href>〜</a>】を挿入できますので、ソーシャルメディアや他のサイトの情報も記載できます。
    とは言っても、ユーザーごとにプロフィールを充実させるのは面倒ですし、できればフォローボタンとか Facebook の購読ボタンとかも設置できたらいいですよね。
    というわけで、よりプロフィールを充実させるカスタマイズ方法についてまとめていきます。

    複数ユーザーでワードプレスを更新する時のプロフィールとソーシャルメディアの連携方法

  • 【初心者向け】WordPressの記事投稿時に最低限気をつけたい3つのポイント

    書く記事の内容以外に重要なポイントを 3 つピックアップしました。
    『コンテンツ イズ キング』(Content is King)と言われるように、記事内容が重要なのは言うまでもありませんが、それ以外に、ワードプレスという点、ブログという点、インターネット上のメディアであるという点から大事なことをまとめました。
    この 3 つを押さえておくことで、訪問者さんが使いやすく、見やすく、SEO 的にも効果があると言われる記事を書くことができるでしょう。

    1.アクセスアップのための記事タイトル

    タイトルは重要です。検索結果上でユーザーが読むべき記事かどうか、自分の知りたいことが書かれているかどうかを判断する一番の材料になるからです。
    このタイトルがユーザーの求めていることを表していれば、まずはクリックされてブログに訪問してもらうという第一関門は突破できます。そのため少しくらい長くなってもいいので、記事内容を要約したタイトルにする方がいいでしょう。SEO 的にも検索キーワードを盛り込んでおくなどの工夫が必要です。
    ちなみに、All in One SEO Pack を入れていれば、SEO タイトルは別に指定ができます。人間の注意を引きつけるためのタイトルと検索エンジンに評価されやすいタイトルを別々に考えて設定するとより良いはずです。

    2.パーマリンクの設定

    パーマリンクとは、いわゆる記事の固有アドレスのことですね。ブログタイトルの下に「パーマリンク」という項目があります。
    ここは、ワードプレスのサイドメニューにある【設定】の中の【パーマリンク設定】という場所で、表示形式を指定することができます。日付で指定したり、個別の ID で指定したり、、、カスタム構造でカテゴリーやブログタイトルをそのままURLにすることもできます(日本語でもOK)。

    管理画面サイドメニュー > 設定 > パーマリンク設定

    何もしなければ設定に従って勝手に設定されるのですが、【編集】をクリックすれば、自分でパーマリンクを自由に決めることができます。

    英語表記のパーマリンク

    ぼくの場合は設定では以下のようなパーマリンクにしています。

    【/%category%/%postname%.html】
    【2014.5.8 追記】
    現在はカテゴリーを挟まず、投稿名を英語表記にしたパーマリンクにしています。.html も付けていません。

    つまり、【http://ドメイン.com/(カテゴリー)/(記事タイトル).html】と表示されるわけです。ちなみに最後に【.html】を付けているのは何となく見た目の問題です。
    そしてカテゴリーも全てスラッグを英語表記にし、記事タイトルもそのまま使わず英語に編集し直しています。
    この記事のURLは【https://presentnote.com/wordpress/basic/3-careful-points-add-post.html】となっていて、赤文字の部分はカテゴリー(のスラッグ)、青文字の部分は記事タイトルになっています。
    ただし、記事タイトルをそのまま使わず、投稿画面でパーマリンクを【編集】することによって英語表記に設定しなおしています(何もしなければ記事タイトルがそのまま表示されます)。
    パーマリンクを編集する
    また、カテゴリーが【wordpress】と【basic】の2つに分かれているのは、カテゴリーを2階層にしているからです。「WordPress」(スラッグがwordpress)という親カテゴリーの下に、「使い方の基礎」(スラッグがbasic)という子カテゴリーがあります。

    日本語のままもありか・・・!?

    が、これがいいのかどうか結論は出ていません。英語圏の Google さん主導の SEO 的には日付や数字の羅列、もしくは日本語表記の URL より、ロボットが認識できる英語表記にした方がいいと言われてもいますが、ワードプレス的には、カテゴリーから始まるパーマリンクは非推奨だそうな・・・。
    また英語表記ではなく日本語表記の場合は、URL も検索対象になるようなので、日本で使う場合は SEO 効果も期待できます。
    例えば、【 http://domain.com/ワードプレスの使い方/初心者に必要な初期設定のまとめ/ 】という URL が表示されている場合、この日本語で書かれた「ワードプレスの使い方」や「初心者に必要な初期設定のまとめ」という部分が検索対象になるということです。
    ただ、日本語の URL を表示できない時やコピペしたりなんかした時は、変な文字の羅列になってものすごく長くなります。

    ※こんなやつ ↓
    http://ドメイン.com/%E3%81%93%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/

    というわけで、まぁ一長一短なわけです。

    記事タイトルのみのパーマリンク(推奨)

    それにいきなり【/%postname%】として、記事タイトルのみのパーマリンクを設定するのが一番いいとしているブログを発見しました。
    > WordPressでSEOに有利かつ短い究極のパーマリンク設定
    理由はリンク切れの回避、永続的に使える(まさにパーマネントなリンク!)、引っ越しの際のメンテナンスが楽、SEO 効果やユーザビリティの観点で利便性がいいなどです。
    色々な設定のパーマリンクと比較して考察していて、とても参考になりました。説得力もあり、ぼくもまだこのブログが小規模な内に記事タイトルだけのパーマリンクに変更しようか悩み中です。
    と、言うわけで色々書いてきましたが、記事を投稿する際にはパーマリンクにも気を使いましょう、という話です。

    【2014.5.8 追記】
    もう随分前の話ですが、パーマリンクの設定は記事タイトルのみ(/%postname%)を採用しました。

    3.カテゴリーやタグの指定

    3 つめはカテゴリーの指定、もしくはタグの指定です。これはどちらかだけを指定してもいいですし、両方指定しても OK です。ぼくの場合はほぼ全ての記事で両方指定しています。
    カテゴリーは 2 階層までにして大まかな分類に使い、タグの方でより細かい分類をしています。またカテゴリーは 1 記事に対して 1 つか 2 つまで、タグは思いつく限り複数指定します。

    ユーザビリティを考えた設計

    もし、あなたが図書館に行って目的の本を探そうとした時どうしますか? もしくは書店でも OK です。
    多分、今なら本を探すための端末を使って検索をすると思います。そして書籍名や著者名、キーワードなどを入力して検索しますよね。そうやって絞り込んで目的の本を見つけました。ではどうやってその本がある棚までいくでしょうか?
    ほとんどの場合、階やジャンル、記号などで探せるようになってるはずです。「2階 ビジネス B2」みたいに。他にも出版社ごとや著者名を五十音順にしたりして見つけやすくしています。
    これが「2 階にあります」だけだったら、絶対に見つからないですよね。「2階 ビジネス」だけでも不十分です。
    ブログはどんどん記事が増えて行きますから、分かりやすく分類しておかないと、記事が埋もれる一方です。特に日記のようなものではなく、コンテンツ重視のブログをつくる場合は訪問者さんが目的の記事にたどり着きやすくするためにも、分かりやすいカテゴリー分けをしましょう。

    カテゴリー構成を事前に考えておく

    カテゴリーは記事を書くたびに「ん〜〜・・・この記事どのカテゴリーに分類しよう」と考えるのではなく、最初にある程度全体の構成を決めておくといいと思います。
    もちろん、後からの追加・変更は OK ですよ。でもパーマリンクにカテゴリーを使用していた場合などはリンク切れの要因になったりするので、追加はいいですが、変更はできるだけ避けたいところ・・・。
    行き当たりばったり追加していくと、後々細かくなりすぎて収集がつかなくなります。それに記事内容もあっちこっち行かず、「このカテゴリーに属する内容だから、ここまでにしておこう」というセーブもかかります。
    カテゴリーをベースにしてネタを探したり、記事内容をまとめるなどもしやすくなります。特にコンテンツサイトの場合は「検索+ユーザビリティ」の観点から構成が大事です。最初の立ち上げ段階から立ち上げ後の初期の段階で、カテゴリーはある程度全体像を決めちゃいましょう。
    ちなみにタグは後からどんどん追加しても大丈夫だと思います。まぁあまり多くなるとカオス状態になってしまいますのでこれにも限度ってものがありますけどね。
    以上、記事を投稿時に最低限気をつけたい 3 つのポイントでした。

  • 【初心者向け】WordPress投稿の画像アップロード/挿入と編集の仕方

    エディタの使い方として画像のアップロードの方法と記事への挿入方法について説明しておきたいと思いますが、まずはアップロードの方法についてまとめていきたいと思います。

    WordPress3.5 以降、メディアの追加方法に変更がありました。バージョン3.5 以降の画像アップロードの方法はこちら。

    【初心者向】WordPress3.5以降の画像/メディアの追加方法

    画像のアップロードと挿入方法

    画像をアップロードや挿入したい場合は、エディタのツールバーの外にあるメディアのアップロード/挿入というボタンをクリックします。ビジュアルエディタを使っていても、HTML エディタを使っていても、このボタンは共通してエディタの上部にあります。
    クリックするとこんなウィンドウが開きます。
    メディアアップローダー
    画像をアップロードする方法は主に 3 通りあります。

    (1) ローカル(自分のPC上)からファイルをアップロードする
    (2) すでにインターネット上にアップロードされているファイルの URL を指定する
    (3) すでに自分のワードプレスのメディアライブラリにアップロードしている画像を使用する

    それぞれ詳しく見て行きましょう。

    (1) ローカル(自分のPC上)からファイルをアップロードする

    ほとんどの画像は、まず自分の PC の中にあるものです。なのでこれが一番使用頻度が高いんじゃないでしょうか? メディアの【アップロード/挿入】ボタンをクリックすると、まず最初に開かれているのもアップロード用の画面です。
    ※もし、同じような画面が表示されない場合は、「新アップローダーもご利用ください」をクリックしてください。
    アップロードする方法は、画面中心にある【ファイルを選択】からアップロードしたいファイルの場所を探して【開く】か、ローカルからアップロードしたいファルコンをドラッグ&ドロップして取り込みます。
    PCのローカルファイルをアップロード
    ここからアップロードしたファイルは、WordPress の【wp-content】中にある、【uploads】というディレクトリ(フォルダのこと)に入ります。
    アップロードすると、以下のような画面が表示されますので、【投稿に挿入】をクリックすれば挿入されます。
    画像の編集画面
    が、ここでは【投稿を挿入】をクリックする前にいくつか設定しておきたいことがありますので、早まらずにちょっとまちましょう。詳細は後ほど。
    > 今すぐ知りたい!

    (2) すでにインターネット上にアップロードされているファイルのURLを指定する

    これはネット上にある画像の URL を直接指定して仕様する方法です。ただし、著作権や利用規約には十分注意してください。

    URL を指定する場合の注意

    利用規約というのは、例えば画像素材配布サイトなどには「URL を直接指定しないでください」と注意書きがなされている場合が多いです。つまり「使ってもいいけど、一旦ダウンロードして、あなたのサーバーにアップロードしてから使ってね」という意味です。
    ネット上に溢れ返っている画像ファイルの URL を直接指定する方法は、このようにあまり使うことはないと思います。この方法を使う場合は、もっぱら自分の管理する別ドメイン下にあるイメージとか、ワードプレスのイメージディレクトリにアップロードしたイメージとかを使用する場合になるはずです。
    例えば、、、ワードプレスのテンプレートディレクトリの中には、ほとんどの場合【images】というディレクトリがあると思います。
    この【images】の中にアップロードしている画像を使用したい場合、わざわざローカルにダウンロードしてから、再度メディアファイルとしてアップロードする必要はありません。直接 URL を指定すれば OK です。
    先ほどのローカルからアップロードしたファイルの保存場所と比較すると・・・
    イメージディレクトリの関係図
    このような関係になっています。

    URL を指定して挿入する

    例えば、テンプレートの中の【images】ディレクトリの中にある画像ファイルをそのまま使用した場合は、【URL】の部分に画像の URL を入力します。http:// から始まる絶対パスで指定してください。

    http://domain.com/wp-content/themes/(テンプレートフォルダ)/images/(イメージファイル)

    という感じです。
    そして、任意の【タイトル】を入力して投稿に挿入をクリックすれば OK です。メディアファイルが投稿に挿入されます。
    URLを指定して画像を挿入

    (3) すでに自分のワードプレスのメディアライブラリにアップロードしている画像を使用する

    これは、(1) の方法などで既に過去アップロードしたことがあるメディアファイルを使用したい場合に使います。つまりメディアライブラリの中にあるファイルを使うということですね。サーバー上では【uploads】ディレクトリの中にあるファイルということになります。
    メディアライブラリを選ぶと、今までにアップロードしてきたファイルが一覧表示されています。
    数が多くなって目的のファイルがどこにあるのか分からなくなって来た場合は、右上の検索窓からファイル名や説明書きなどの条件で検索するといいでしょう。もしくは、左側に日付指定のフィルターがありますので、ここで絞ることもできます。(メディアファイルを年月で分類する設定をしている場合)
    挿入したい画像が見つかったら、右端にある【表示する】をクリックすると、(1) の時と同じ画像の編集・挿入画面が表示されますので、【投稿に挿入】をクリックしてください。そうそれば画像が挿入されます。

    メディアライブラリから挿入する

    (4)【おまけ】ギャラリーからの挿入方法

    投稿に1つでもメディアファイルをアップロードした場合、【ギャラリー】という選択肢が増えます。
    ギャラリーからメディアを挿入
    このギャラリーには、投稿編集時に “アップロードした画像だけ” がまとめられています。
    アップロードされるのは、その記事で初めてアップロードされたメディアだけで、使用しているメディアとは違います。あくまでもその記事がアップロードの入口になっている場合のみです。
    投稿に使った画像をアイキャッチ画像としても使いたいときとか・・・その逆とかも考えられますね。アップロードした画像を何回か使い回したいときとかには探す手間が省けて便利です。そういう意味ではブログ記事よりも固定ページでの使用頻度が多いですね、個人的に。

    画像を編集しよう!・・・の基礎

    さて、色々画像を挿入したいとは思いますが、サイズも様々でそのままだとレイアウトが合わなかったり、挿入位置も変えたいところです。
    そういった部分の編集方法を押させておけば、画像挿入をかっこよく決めることができる(!?)と思いますので、押さえておいてください。
    アップロード後の画像編集

    (1) タイトル

    メディアをアップロードした場合、タイトルは自動的にファイル名が割り当てられます。変更することも可能です。検索しやすいようにタイトルを付けておくと後々便利です。
    ぼくの場合はアップロードする前にファイル名は検索しやすい英単語にしてます。もちろん日本語タイトルでも OK です。
    ただし、タイトルを変更してもアップロードされたファイル名が変わる分けではありませんので注意してください。

    (2) 代替テキスト

    この代替テキストは、画像が表示されなかった場合に画像の代わりに表示されるテキストのことです。タグで言うと【alt】のことです。
    これはユーザビリティや SEO の観点からも、必ず指定するようにしてください。どんな内容のテキストにすればいいのか、ですが、画像の内容が分かるような文章っぽい感じがいいでしょう。
    なぜなら、画像が見えなかった場合の画像の代わりだからです。画像で伝えたいことを文字で伝えなければなりませんので、当然文章っぽく説明くさくなるはずです。かといってダラダラした文字は不要なので、一言で言い表せるような文字を指定しておきましょう。

    (3) キャプション

    キャプションの説明用画像
    キャプションはこのように表示されます

    キャプションは、画像の下に表示される文字のことです。言葉で説明するより見てもらった方が早いと思いますので、右側の画像で確認してください。
    この場合、設定画面の【キャプション】の部分に「キャプションはこのように表示されます」と指定しました。どのようなタグで指定されているかは、HTML エディタに切り替えて確認するといいでしょう。

    (4) 説明

    この説明は、何かを入力したからといって、HTML に反映されるものではありません。ワードプレス上のメディアを管理しやすいように付け加えておくメモみたいな感覚で使用したらいいと思います。
    ちなみにぼくは使ったことありません。

    (5)リンクURL

    ここは画像をクリックした際にリンクする URL を指定できます。初期状態では画像の URL がそのまま指定されています。好きな URL に変更することが可能ですので、外部サイトへのバナーとして使ったり、広告のような感覚でも使えます。

    初期状態の URL には注意!

    アップロードした段階では、このリンク URL はそのままアップロード先のメディアファイルの URL になっています。これをそのまま使用するのはオススメできる場合とオススメできない場合があります。
    まず、オススメできる場合は、元々の画像サイズは大きいのに、かなり縮小して挿入しなければならない場合です。この場合元のサイズの画像を見てもらうには、画像をクリックして元の大きさのイメージを開いてもらわないといけないので、リンク URL を残しておいた方がいいでしょう。
    一方、画像に URL を指定するということは、クリックされる可能性があるということです。リンク先として意味のある URL を指定する場合でない限りは何もリンクさせない方がいいでしょう。
    クリックしたけど同じ画像が開かれただけだった・・・ということほど、訪問者をイラつかせることはありません。
    まとめると、リンク URL を指定するなら

    • 画像をより拡大表示して見てもらいたい場合
    • 別のページへ誘導する明確な目的がある場合

    に限定して、それ以外は空欄にして何もリンクさせないようにしておきましょう。

    (6) 配置

    イメージを「なし」で配置
    画像をどこに配置するかを選択できます。【なし】の場合は左寄せになります。上の画像は【なし】で挿入しています。

    左側に回り込みして挿入する

    イメージを「左」で配置【左】を選択すると、画像は左側に回り込み表示されます。【なし】で挿入した場合の左寄せとの違いは“ 回り込みされる ”という点です。
    画像の挿入位置は赤文字の【左】の直前ですが、画像と文字が同じ段落内(<p>〜</p>)にあることによって、画像のサイズとブログのコンテンツ幅の“ 余った部分 ”に文字が表示されていきます。CSS で言うところの【インライン】要素(display: inline;)と【float: left;】が適用されているんだと思われます。

    逆に右側に回り込みして挿入する

    イメージを「右」で配置【右】を選択すると、画像は右側に回り込み表示されます。これも上記と同じように画像の挿入位置は赤文字の【右】の直前ですが、段落が変わらないので今ご覧になっているような表示になります。
    こちらも CSS で言うところの【インライン】要素と【float: right;】が適用されていると思われます。

    中央に挿入する

    イメージを「中央」で配置【中央】を選択すると、画像は真ん中に表示されます。これは回り込みではないので、文字をかき分けて真ん中に居座ったりはしません。画像と文字と段落が別々になります。

    (7) サイズ

    画像のサイズを選べます。フルサイズ(元の画像)の大きさによって選べる選択肢が変わってきます。元の画像が大きければ、大・中・サムネイルと選択肢は広がりますが、元の画像が小さければ、フルサイズしか選べなかったり選択肢は狭くなります。
    ちなみに、上のひまわりの画像は元のサイズが 128×128 しかないので、フルサイズしか選べませんでした。

    より高度な画像編集も可能

    さて、一通り画像のアップロードから編集・挿入までをまとめてきましたが、実はワードプレスの管理画面上からはもっと細かい画像やメディアファイルの編集ができるんです。
    画像の細かいサイズ変更とか、トリミングとか、回転とか・・・【画像を編集】という部分をクリックして開いてみると、たくさんのおもしろい発見があるとおもいますよ。そういったこともいつかまとめられたらと思います。
    ちなみに、今回は画像ファイルを取り扱って説明して行きましたが、画像以外にも音声ファイルや動画ファイルも同じ要領でアップロードできますので、是非活用してみてください。

  • 【初心者向け】投稿エディタの使い方-WordPress4.0最新版-

    2015/6/25 修正・追記
    内容を WordPress の 4.2.2 の最新版の仕様に基づいた記事に更新しました。

    このエントリーは “投稿エディタの使い方” に関してまとめています。WordPress のエディタをうまく使いこなせれば、1 記事 1 記事を魅力的なものにしていくことができますので、ぜひ色々と研究して欲しい部分です。
    WordPress はバージョンアップを繰り返すごとにエディタの操作性も変わっていっていますので、お使いのバージョンと記事内のバージョンを確認してください。

    WordPressの2つのエディタを使いこなす

    WordPress の記事投稿・編集用のエディタには 2 つのタイプがあります。

    ビジュアルエディタ

    1 つはビジュアルエディタ。Word なんかの文章作成ソフトのような感覚で、文字入力・装飾などができます。
    文字の色や配置などを視覚的に確認しながら装飾していくことができるので、初心者でも簡単に記事を編集することができます。

    HTMLエディタ

    もう 1 つは HTML エディタ。タグを打って入力していきます。ある程度のタグはワンクリックで挿入できますし、HTML や CSS に詳しい人なら細かいデザインも好きなようにできます。

    どちらを使うべき?

    オススメはどちらも使うことです。記事を書いたり、簡単な装飾はビジュアルエディタで行って、細かい設定やデザイン・装飾をしたり、タグをきれいに整えたりといった作業は HTML エディタを使って行います。
    もちろん、なれていない方はビジュアルエディタだけで十分です。
    両方使い分ける際には、エディタの切り替え時にレイアウトが崩れたり、タグが無効になったりすることもあるので注意してください。

    ビジュアルエディタを使う

    まずはビジュアルエディタの使い方をまとめておきます。
    なお、ここでは 2015 年 6 月時点でのデフォルトのエディタの使い方を説明していますが、より使いやすいビジュアルエディタにするためには、functions.php にコードを追記してエディタの機能を追加したり、TinyMCE Advanced などのプラグインを導入することをオススメします。
    ちなみに、デフォルト状態のビジュアルエディタはツールが 1 行分しかないかと思いますが、1 段目右端にあるボタンをクリックすれば、2 段目の表示/非表示ができます。
    ビジュアルエディタ

    ビジュアルエディタの改行について

    まず押さえておきたいのが改行方法。
    ビジュアルエディタの改行方法には 2 通りあります。ひとつは普通に Enter キーを押す方法。この場合タグは【<p> 〜 </p>】が差し込まれ、改行というよりは段落が変わります。改行前の段落と改行後の段落の間にスペースが空きます。

    例)
    改行前の文章です。
    改行後の文章です。それぞれの文章は <p> 〜 </p> に挟まれています。

    もうひとつは shift + Enter キー を押す方法です。この場合タグは【<br />】の改行タグが差し込まれます。改行前と改行後の文章の間にスペースはありません。

    例)
    改行前の文章です。
    改行後の文章です。2 段の文章全体が <p> 〜 </p> で挟まれていて、間に <br /> が入ります。

    ビジュアルエディタのボタン一覧

    WordPressビジュアルエディタのボタン一覧
    初期状態では上の図のようなボタンが配置されています。プラグインを使えばボタンを追加・削除することもできますが、一通りデフォルトの機能について紹介していきたいと思います。

    (1) メディアを追加

    画像・音声・動画などのメディアファイルをアップロードし、記事内に追加できます。詳しくは別の記事にまとめました。

    【初心者向け】WordPress投稿の画像アップロード/挿入と編集の仕方

    (2) 強調

    WordPressビジュアルエディタ強調
    文字を <strong> で囲み強調します。HTML 的には重要性を表します。一般的に見た目は太字になります。

    強調

    (3) 斜体

    WordPressビジュアルエディタ斜体
    文字を <em> で囲みます。HTML 的にはアクセントを表します。見た目は斜体になります。
    ちなみに、純粋に斜体にしたい場合は <i> タグでも実現できます。このタグは声や思ったことなどを表現する時に使用します。

    斜体

    (4) 取り消し線

    WordPressビジュアルエディタ取り消し線
    文字を <del> で囲み取り消し線を入れます。HTML 的には削除された部分を表します。

    取り消し線

    (5) リスト(順序なし)

    WordPressビジュアルエディタ番号なしリスト
    <ul> タイプの順番のないリスト表示です。行頭には■や●、□や○などが表示されます。この行頭記号の指定はスタイルシートで変更できます。

    • リスト
    • リスト
    • リスト

    (6) リスト(順序あり)

    WordPressビジュアルエディタ番号付きリスト
    <ol> タイプの順番のあるリスト表示です。リストの並び順に意味がある場合はこちらを仕様します。行頭には 1 から順番に番号が付きます。この行頭番号も、ローマ数字やイロハなどスタイルシートで変更可能です。

    1. 番号付きリスト
    2. 番号付きリスト
    3. 番号付きリスト

    (7) 引用

    WordPressビジュアルエディタ引用
    文章を <blockquote> で囲み引用を表します。文章を書籍などから引用した場合や、他のサイトから記事を転載した場合はこの引用タグで囲みます。

    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

    (8) 区切り線(横ライン)

    WordPressビジュアルエディタ区切り線
    <hr> タグを挟みます。一般的に表示は横ラインが入ります。HTML 的には段落・テーマの区切りを意味します。


    (9) 左寄せ

    WordPressビジュアルエディタ左寄せ
    <p> タグで囲まれた段落を左寄せにします。通常は初期状態で左寄せになっていますが、中央寄せや右寄せした文章を左寄せに戻す時などに使えます。

    左寄せ

    (10) 中央寄せ

    WordPressビジュアルエディタ中央寄せ
    <p> タグで囲まれた段落を中央寄せにします。

    中央寄せ

    (11) 右寄せ

    WordPressビジュアルエディタ右寄せ
    <p> タグで囲まれた段落を右寄せにします。

    右寄せ

    (12) リンク挿入/編集

    WordPressビジュアルエディタリンク
    文字を <a> タグで囲みリンクを挿入します。リンク編集画面が表示され、リンク先やリンク先のページを同一ページで開くか/新規のページ or タブで開くかなどを選べます。
    また、過去に投稿した記事をワンクリックでリンク挿入することもできます。
    add-link-window

    (13) リンク削除

    WordPressビジュアルエディタリンク削除
    <a> タグで囲まれた部分から <a> タグを取り除き、リンクを削除します。

    (14) 続きを読む

    WordPressビジュアルエディタ続きを読む
    <more> タグを挿入し、投稿の一覧表示画面でこのタグの部分に「続きを読む」を表示します。このタグ以降の文章は「続きを読む」をクリックしないと読めません。
    1 記事 1 記事ごとに、「続きを読む」の挿入場所を変えたい場合に有効な機能です。テーマによってはある一定文字数以降を自動的に「続きを読む」状態にしている仕様もあります。

    (15) ビジュアルエディタ 2 段目の表示/非表示

    WordPressビジュアルエディタ2段目
    ビジュアルエディタの 2 段目を表示させたり、非表示にしたりします。初期状態は非表示になっていますので、ビジュアルエディタをメインで使う方はここをクリックして 2 段目を表示させておきましょう。

    (16) 段落

    WordPressビジュアルエディタ段落
    文字を見出しタグで囲みます。<h1> 〜 <h6> まで用意されています。基本的に <h1> はタイトル部分に適用されており、1 ページに 1 つであることが望ましとされているので、<h2> 以降を仕様しましょう。
    また見出しにしていた部分を選択し「段落」をクリックすれば、<p> タグで囲まれた書式に戻ります。
    たまに知識のない方が、段落タグを文字の大きさを変えるために使っているようですが、これは文字の大きさを変えるためのものではないので注意してください。
    見出しタグの使い方はこちらの記事を参照してください。

    【初心者向】WordPressで記事を作成する時に意識したいSEO的7つのポイント

    (17) アンダーライン

    WordPressビジュアルエディタ下線
    文字に下線(アンダーライン)を引きます。

    アンダーライン

    (18) 両端揃え配置

    WordPressビジュアルエディタ両端揃え
    テキストを両端揃えにします。日本語の場合だと右端の縦ラインを綺麗に揃えてくれます。ただし、ブラウザによってはうまく表示できな場合もある・・・らしい??

    WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください ! WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください ! WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !

    (19) 文字色変更

    WordPressビジュアルエディタ文字色
    文字に色を付けます。
    ▼ をクリックするとあらかじめ設定された色を選べます。【カスタム】から自由に色を設定することもできます。

    フォントカラー:レッド(#ff0000)
    フォントカラー:ブルー(#0000ff)
    フォントカラー:イエロー(#008000)

    (20) テキストとしてペースト

    WordPressビジュアルエディタテキストとしてペースト
    ビジュアルエディタに Word などの文章をコピーして貼り付けたい場合、元の Word の書式をそのまま引き継ぐ設定になっています。この設定を OFF にしたい場合はこのボタンをクリックしておきます。
    純粋に文字情報のみがペーストされます。

    (21) 書式設定のクリア

    WordPressビジュアルエディタ書式設定クリア
    装飾した文字を装飾なしの状態にします。

    (22) 特殊文字挿入

    WordPressビジュアルエディタ特殊文字
    特殊文字を挿入します。クリックすると選択ウィンドウが開くので挿入したい文字をクリックします。
    WordPress特殊文字

    ♠♣♥♦

    (23) インデントを減らす

    WordPressビジュアルエディタインデントを減らす
    テキストのインデントを減らします。次の【 (24) インデントを増やす】で右へインデントを追加した段落のインデントを戻す時に使用します。

    (24) インデントを増やす

    WordPressビジュアルエディタインデントを増やす
    テキストのインデントを増やして右にずらします。スタイルシートを使って左側に余白が追加される書式になります。元に戻す場合は【(23) インデントを減らす】をクリックします。

    インデントを増やす(クリック 1 回)

    インデントを増やす(クリック 2 回)

    インデントを増やす(クリック 3 回)

    (25) 取り消し(undo)

    WordPressビジュアルエディタ取り消し
    操作を取り消して 1 つ前の状態に戻ります。

    (26) やり直し(redo)

    WordPressビジュアルエディタやり直し
    取り消した操作を元に戻します。

    (27) キーボードショートカットの表示

    WordPressビジュアルエディタショートカット
    キーボードショートカットの一覧が表示されます。
    WordPressキーボードショートカット

    (28) 集中執筆モードへの切り替え

    WordPressビジュアルエディタ集中執筆モード
    集中執筆モードへ切り替えできます。集中執筆モードをオンにするとエディタ周りのメニューやウィジェットが非表示になり、中央のエディタ部分だけが表示されます。
    マウスをサイドバー部分に動かせば再び表示されますが、エディタ部分にマウスを戻すと再び非表示になります。集中執筆モードをオフにするには、もう 1 度エディタ右上のボタンをクリックします。
    集中執筆モードのボタンがない場合は【表示オプション】を開いてみてください。集中執筆モードを有効化する(最大行表示エディターと集中執筆モード機能を有効化します。)にチェックを入れることで機能が使えるようになります。
    集中執筆モードは WordPress 4.0 か 4.1 辺りから仕様が変わりました。以前はエディタのボタンもほとんど非表示になり、もっと無駄を削ぎとった感じで今より本当の意味で “集中” って感じでした。
    個人的には以前の集中執筆モードの方が好きです。
    WordPress集中執筆モード

    ビジュアルエディタでの装飾方法

    ビジュアルエディタを使って文字を装飾する場合は、装飾したい文字をドラッグしてハイライト状態にし、装飾したいボタンをクリックします。
    例えば文字に色を付けたい場合、色を付けたい文字を選択して反転させます。
    その状態のまま文字色変更のボタンをクリックして好きな色を選択すると、文字の色が変わります。ビジュアルエディタの場合、実際に文字の色が変わるので視覚的に確認もできます。
    ビジュアルエディタで文字色を変更する

    HTMLエディタを使う

    HTML エディタの使い方についてまとめておきます。
    HTML エディタとは言っても全てをタグ打ちするわけではなく、クリックひとつでタグを打ち込んでくれるボタンがいくつかそろっています。また、独自の CSS をつくって class や id 指定する場合も、HTML エディタで編集した方が早いと思います。
    また、AddQuicktag というブラグインを使うとワンクリック入力できるタグを自由に追加することができるのでオススメです。

    HTMLエディタでタグを入力する方法

    まずはそのボタンの使い方です。
    タグの構造は【<● >〜</●>】というように、文字を挟むことで挟んだ文字に対して条件を指定します。
    例えば・・・

    <strong>装飾したい文章</strong>

    とすれば

    装飾したい文字

    のように強調文字(太文字)になります。
    もちろんこれらを手打ちしてもいいのですが、より簡単なのはエディタのタグボタンを使うことです。
    このボタンを使うには、まず装飾したい文字の頭にカーソルを持って来て、装飾したいタグをクリックし、装飾を終わらせたい文字の後にカーソルを持って来て、もう一度装飾に使ったタグをクリックします。そうすると、装飾したい文字がタグにはさまれることになります。
    例えば、、、

    (1) 装飾したい文字の先頭にカーソルを合わせる

    装飾したい文字の先頭にカーソルを合わせる

    (2) 使用するタグのボタンをクリックする

    使用するタグのボタンをクリックする

    (3) 装飾を終了したい文字の後ろにカーソルを合わせる

    装飾を終了したい文字の後ろにカーソルを合わせる

    (4) 使用したボタンと同じボタンをもう1度押して終了タグを挿入する

    使用したボタンと同じボタンをもう1度押して終了タグを挿入する
    こんな感じです。
    タグを挿入したい文章を選択ハイライトしてからボタンを押すと一発で開始タグと終了タグで囲ってくれますので、こっちの方が便利かもしれませんね。

    HTMLエディタの改行について

    HTML エディタは基本的には <strong> や <a href=”url”>、<h2> などのタグが表示されるんですが、段落( <p> )と改行( <br /> )のタグは表示されません。なので、これ改行なの? それとも段落が変わっているの? とよく分からなくなっているかもしれませんね。
    結論から言いますと、Enter キー 1 回の普通の改行は【<br />】扱いとなり、Enter キー 2 回の 1 行空きにすると【<p> 〜 </p>】で囲まれることになります。
    こんなイメージ・・・
    WordPressHTMLエディタの改行イメージ

    まとめ

    WordPress のエディタはデフォルトの状態でも結構使いやすくはできていると思います。まずは基本的な使い方を覚えておきましょう。その後物足りないと思った場合も、プラグインをインストールすることで機能を拡張し補うことができます。そうすればより使いやすいエディタになると思います。
    ところでエディタにはもう 1 つ重要な【メディアを追加】ボタンがあります。このボタンでは画像や音声、動画などのメディアファイルをアップロード&埋め込むことができます。メディアの挿入・編集の方法については別の記事でどうぞ。

    【初心者向け】WordPress投稿の画像アップロード/挿入と編集の仕方

    【初心者向】WordPress3.5以降の画像/メディアの追加方法

  • 【初心者向け】WordPressの記事投稿を便利にするカスタマイズ法

    2015/6/24 修正・追記
    内容を WordPress の 4.2.2 の最新版の仕様に基づいた記事に更新しました。

    やはりワードプレスはブログとして使いのがメインになると思いますので、一番使用頻度が高いと思われる記事投稿の仕方をまとめておきます。
    今まで無料のレンタルブログを使っていた人にとってはちょっと馴染みが薄かったり取っ付きにくかったりするワードプレスですが、実は便利で無料のレンタルブログに比べて汎用性が高く自由度も高い(さすが CMS です)ので、使いこなせればインターネットでのビジネス展開に大きなプラスになりますよ!
    よく分かんない・・・という方にはもちろん、すでに初心者の域を脱していても「知らなかった」ということがあるかもしれません?! まぁちょっと流し読みしてみてください。

    新しいブログ記事の投稿画面を表示させる

    新しい記事を書くためには、ブログ投稿画面へ行かなければなりませんが、新規の投稿をするための画面へ行く方法は 3 通りほどあります。

    1.管理画面のサイドバーから行く

    管理画面のサイドバーに【投稿】という項目があります。ここの2つめの【新規追加】をクリックすれば、新規のブログ記事投稿画面を開くことができます。
    WordPress投稿新規追加

    2.記事一覧表示から追加する

    投稿した記事は、記事一覧表示に表示されます。この画面の上部に【新規追加】のリンクがありますので、クリックすれば投稿画面を開くことができます。
    WordPress投稿新規追加

    3.上部のアドミンバーから追加する

    ログインした状態だとワードプレスの管理画面、もしくはブログを表示さいた状態の上部にダークグレーのバーが表示されていると思います。これをアドミンバーと言うそうですが、ここからも新規記事の投稿が行えます。
    アドミンバーの【+ 新規】をクリックするか、マウスのポインタを【+ 新規】という部分に持ってくると、メニューが表示されますので、【投稿】をクリックするとブログの新規記事投稿画面へ移動します。
    WordPress投稿新規追加

    ブログ記事の投稿画面を使いやすくする

    ブログ記事の投稿画面は初期状態ではこんな感じだと思います。
    WordPress投稿画面
    真ん中に記事を書くスペースがあり、右サイドには投稿やカテゴリーの設定、タグの設定をするためのウィジェットがあります。記事を書くスペースの下にも、いくつかウィジェットが確認できるかもしれません。
    しかし、これらのウィジェットの中には必要ないものもありませんか? 正直フォーマットとか、リビジョンとか、無くてもいい人は多いはず。。。
    そんな時は消しちゃいましょう。

    投稿画面のウィジェットを表示/非表示にする

    もし必要ないウィジェットが表示されているなら、非表示にして見やすくすっきりさせちゃいましょう。
    画面の右上に【表示オプション】というのがあると思います。ここをクリックすると、下にドロップダウンされてメニューが現れるんですね。そしてチェックボックスのついた項目がいくつもあるのが分ります。
    表示オプション
    ここにはデフォルトのウィジェットに加え、プラグインによって追加されたウィジェットも表示されます。
    例えば、WordPress の必須プラグインとして名高い「All in One SEO Pack」。このプラグインが入っていると、記事を書くエディタの下(フッターエリア)に SEO の設定ができるウィジェットが表示されます。
    まぁこのプラグインを入れているからには使用するはずでしょうから、非表示にする必要はないと思いますが、とにかく、ここで表示ウィジェットの切り替えができます。

    レイアウトをワンカラムにする

    また記事投稿・編集画面をワンカラムか 2 カラムか選ぶこともできます。最初は2カラムになってますが、ワンカラムにすると、サイドメニューにあった「公開」とか「カテゴリー」とかのウィジェットが全て投稿エディタの下に 1 列に並びます。
    投稿画面をワンカラム表示に

    ウィジェットの位置を変更

    さらに、ウィジェットの位置は変更することができます。
    やり方は各ウィジェットのタイトルバーの部分にカーソルを持って行き、マウスのポインタが十字になるのでドラッグ&ドロップで移動させるだけ。
    例えばアイキャッチ画像を設定するウィジェットを一番上に持って行きたいときは、アイキャッチ画像の部分をドラッグして上に移動させると・・・移動可能な位置に点線が表示されますので、目的の位置で離せば OK です。
    投稿画面のウィジェットを移動
    ただ、右サイドバーのウィジェットと、投稿スペースの下のフッターウィジェットとでは、必要な横幅が違うのでむやみに移動させると逆に使いにくくなるかもしれません。
    なので、ウィジェットの配置を入れ替える場合は、右サイドバーのウィジェットは右サドバー内で、フッターのウィジェットはフッター内で入れ替えることをオススメします。

    記事を書く

    さて、投稿画面が使いやすくなったところで早速記事を書いていきましょう。記事は分かりやすく、おもしろく、読みやすい(見やすい)が理想ですよね。そのあたりの記事内容に関しては別の記事にまとめました。

    分かりやすい文章コンテンツをつくる5つの鉄則


    また記事を書くためのエディタの使い方はこちらのにまとめていますので、ビジュアルエディタや HTML エディタの使い方を知りたい方は上記の記事を参考ください。

    【初心者向け】投稿エディタの使い方-WordPress4.0最新版-

    投稿を公開しよう!

    記事を書き終わったら早速投稿!・・・と言いたいところですが、その前に 1 度プレビュー表示で実際のブログ画面を確認しておきましょう。他にも誤字脱字の確認など、声に出して記事を読み直すと違和感を感じる部分が出てくると思うので加筆・修正を行って仕上げに入りましょう。

    ブログ記事のプレビューで表示を確認

    サイドメニューの【公開】ウィジェットに【プレビュー】というボタンがあります。このプレビューをクリックすると、別ウィンドウ(もしくはタブ)が開きます。実際にブログに記事を公開したときと同じような状態で投稿内容をチェックすることができます。
    特に画像の表示や改行のされ方、CSS での装飾など、ビジュアルエディタ上ではうまく反映されない内容をチェックしておきましょう。

    公開条件の指定

    公開ウィジェットには色々なメニューがあり、公開条件を細かく指定することができます。例えば下書きとして保存したり、公開日時を予約したりなどです。
    WordPress公開設定

    (1) 公開ステータスの指定

    公開ステータスには、【公開済み】と【レビュー待ち】と【下書き】の 3 つがあります。新規で投稿している場合は公開するまで【レビュー待ち】と【下書き】の 2 つだけになります。
    また、一度公開した後も【下書き】を選択すれば下書きの状態、つまり公開されていない状態にいつでも戻せます。
    【レビュー待ち】は、投稿者や寄稿者が管理者や編集者などに投稿内容をチェックしてもらった上で公開したい場合に選択します。とは言っても、寄稿者だとこのレビュー待ちしか選べませんが・・・(泣)

    (2) 公開状態の設定

    普通に公開するのか、何か条件指定をするかを選べます。
    【公開】は普通の一般公開のことですが、その下にある「この投稿を先頭に固定表示」にチェックを入れるとどれだけ記事を追加しても常に先頭に表示されるようになります。
    またテーマによっても扱いが異なります。例えば Twenty Eleven のショーケーステンプレートを使用した場合のショーケース部分に表示させたい記事もここをチェックする必要があります。Twenty Fifteen の場合は固定表示した記事に「注目」のタグが追加されます。
    【パスワード保護】はその名の通り記事にパスワードを設定して、パスワードを知っている人のみが閲覧できるようにします。顧客や会員ごとに公開範囲を変えたい時などに使えそうですね。
    パスワード保護にチェックを入れると、パスワード設定の入力欄が表示されます。
    【非公開】は一部の人以外ブログ上では閲覧できないようにする設定です。一部の人とは、管理者や編集者、そしてその記事を投稿した本人のことです。

    (3) 公開日時の指定

    年・月・日・時・分、と細かく公開日時を指定できます。過去の日時を指定して記事の順番を入れ替えたり、未来の日時を指定して予約投稿にしたりできます。
    また【ゴミ箱へ移動】をクリックすれば記事は瞬く間に「ゴミ箱」へ移動します。とは言っても、ゴミ箱の中をみればまだ記事が確認できますし、復元することも可能です。

    準備ができたら公開する

    これらの設定が済んだら【公開】をクリックして投稿しましょう。とは言っても、基本的に何も設定することはなさそうですよね・・・。
    1 つ注意しておきたいのが公開日時です。そのままだと記事を立ち上げた時間のままだったりしますので、「昨日の下書きを仕上げて公開するか〜」とか思ってたら昨日の日付のまんまだった・・・なんてこともありえます。一度も公開していなければ、日付だけは最新の日にちに自動調整してくれるようですが、実際あやしいです。
    というわけで、これで無事投稿ができます。あとはコンテンツ命、良質な記事をつくって行きましょう!

    投稿した記事を編集するときに便利なリビジョン機能

    リビジョンWordPress 3.6 から備わった新しいリビジョン機能。今までもリビジョンはありましたが、より見やすく、使いやすくなりました。
    ちなみに、リビジョンとは過去の記事内容と現在の記事内容を見比べることができる機能です。また、必要があれば古い記事を復元することもできます。
    WordPress 3.6 からの仕様で、変化のあった部分がハイライトされるようになりました。レイアウトも左右に表示されるので、とても見やすいです。
    Mac を使っている方は、バージョンと似たようなものだと思ってもらうと分かりやすいと思います。

    リビジョンの表示方法

    新規投稿時は表示されていないと思いますが、下書き保存や投稿した記事の更新を繰り返していくと、リビジョンが溜まっていきます。それでも表示されない場合は、表示オプションを開いて「リビジョン」の項目にチェックを入れてください。

    リビジョンの使い方

    WordPressリビジョン比較
    リビジョンのところには、溜まっているリビジョンの数が【7+】などと表示されています。その横の【表示】をクリックすると、上の画像のような画面に遷移します。左側が過去のバージョン。右側が最新のバージョンになっていて、上部にあるスライダーを動かすことで保存されている過去のバージョンを遡って確認することができます。
    過去のリビジョンを復元することもできますし、一部だけ復元したい場合は左側のバージョンから復元したい部分をコピーして、元の記事に戻った後にペーストすれば OK です。

    リビジョン機能の注意点

    WordPress は通常の設定のままだとひっきりなしリビジョンを保存していきます。しかしこれが WordPress を重たくさせる要因になっているとかなんとか・・・。いずれにしろ、どんどんデータベースの容量を食っていきますのでできれば保存する過去記事数を制限した方がいいでしょう。
    リビジョンに貯める記事数を制限するにはプラグインを使えば簡単です。ぼくが使っているのは WP Total Hacks というプラグインです。このプラグインを使えば、リビジョンに保存する記事の数を設定できます。他にも様々な専門知識がないとできない設定がクリック 1 つでできてしまう超便利なプラグインなのでオススメです。

    まとめ

    いかがでしたでしょうか? WordPress は色々な機能が備わっていて、自分の使いやすいようにできるのが魅力です。
    逆にそれが原因で解りにくいとか、使いこなせないと感じている人も多いみたいですが、1 つ 1 つの機能を確認していただき実際に記事投稿や更新を繰り返し、WordPress の使い方に慣れていきましょう。