カテゴリー: WordPress

  • アイキャッチに個別記事へのパーマリンクを貼る方法

    トップページの記事一覧。今まではアイキャッチを表示させているだけでしたが、アイキャッチにパーマリンクを埋め込もうと思い、設定してみました。さらにアイキャッチ画像ロールオーバーした際に、発光したような感じになるようにもしてみたいと思います。
    なぜ、こんなことをするのかと言うと、アイキャッチをクリックした際に記事一覧から個別記事へとリンクしてもらうためです。
    今までは画像が表示されているだけで、特にクリックはできなかったんですね。でもアイキャッチをクリックしようと思う人は結構いると思うので、「タイトル」や「続きを読む」と同じような役目をアイキャッチにもしてもらおうと思います。
    ちなみにアイキャッチの設定方法はこちらの記事にまとめています。

    WordPressの記事一覧にアイキャッチを表示させてみた(+αで個別記事にも)


    さらにトップページの記事一覧を抜粋表示にする方法はこちらにまとめています。

    トップページを抜粋記事の一覧表示にする-WordPress Twenty Eleven篇-


    上記 2 つのカスタマイズを行った上で、以下の内容へ進んでいくようになります。また、取り扱っているテンプレートはワードプレスにデフォルトで入っている Twenty Eleven になります。

    記事へのパーマリンクをコピペで設定する

    ワードプレスは主に PHP で動いているわけで、記事タイトルやパーマリンクなんかのタグは全て PHP のタグになっています。PHP についてはまだよく分からないのですが、記事タイトルをクリックすれば個別記事ページに飛ぶのだから、タイトル部分と同じような表記にすればうまくいくだろうことは何となく想像がつきます。
    早速目的のタグを探してみましょう。

    どのように個別記事へのパーマリンクは指定されているのか?

    記事一覧ページに表示されている内容は、【 content.php 】で編集できます。すでに前述の別記事の通りにアイキャッチは表示されるように設定しているので、以下のようになっています(だいたい40行目あたりです)。

    <div class="entry-content">
    	<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span> /* サムネイル形式でのアイキャッチ表示 */
    	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
    	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->

    また、同じ【 content.php 】内で記事タイトルを吐き出すタグにどのようなリンクタグが貼ってあるかを見てみると、以下のようにタイトルを吐き出すタグをリンクタグが挟んでいました。15 行目の記述です。

    <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

    つまり記事タイトルを表示させる【 <?php the_title( ) ; ?> 】タグの前後を、【 <a href=””> 〜 </a> 】のリンクタグで挟んでいるわけです。なので、同じようにアイキャッチを出力している PHP タグを <a> タグで挟めばアイキャッチをクリックした際に個別記事ページへ飛ぶようになるはずです。

    アイキャッチ画像にパーマリンクを指定する

    早速以下のようにしてアイキャッチをリンクタグで挟んでみます。

    <div class="entry-content">
    	<a href="<?php the_permalink(); ?>" rel="bookmark"><span style="float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span></a>
    	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
    	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->

    これでアイキャッチをクリックすると、個別記事のページが表示されるようになります。「タイトル」、「続きを読む」そしてアイキャッチと、記事を全文表示させるための導線が広がりました。これはユーザビリティ的にも必須ですね。早くしておけばよかった・・・。
    ちなみに、<span> で指定しているスタイルは、アイキャッチ画像の表示を回り込ませるための指定なので、好みで変更するなり削除するなりしてください。

    アイキャッチ画像の上にマウスを持って来た時に発光させる方法

    これでアイキャッチからも個別記事へリンクできるのですが、今のままだとアイキャッチにマウスポインタを持って来ても変化がないので、リンクだと気付かれないかもしれません。
    通常テキストリンクなどは、マウスポインタを重ねると(いわゆるロールオーバーで)アンダーラインが表示されたり色が変わったりしますよね? また画像の場合でも枠線が現われたり光ったり暗くなったりと、「ココはリンクです!」ということを主張しているのが基本です。
    なのでアイキャッチ画像も「リンクなんです!」ということを誇示できるようにしたいと思います。これらは全て CSS での指定になりますので、ここからは CSS のお話・・・。

    結論

    以下のように【 content.php 】と、【 style.css 】を変更すれば OK です。

    content.phpの変更

    <div class="entry-content">
    	<a href="<?php the_permalink(); ?>" rel="bookmark"><span style="float: left; margin-right: 1em;" class="linkimg" ><?php the_post_thumbnail('thumbnail'); ?></span></a>
    	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
    	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->

    2 行目の <span> の中に【 class=”linkimg” 】を追記しました。これでサムネイルだけに class を指定したことになります。

    style.cssに追記

    /* =リンクの発光
    ----------------------------------------------- */
    /* サムネイル */
    a .linkimg {
    	background:none!important;
    }
    .entry-content a:hover .linkimg {
    	opacity:0.6;
    	filter:alpha(opacity=60);
    	-ms-filter: "alpha( opacity=60 )";
    	background:none!important;
    }

    CSS へは上記をそのまま追記すれば OK です。これでアイキャッチ画像にマウスのポインタを重ねると淡く発光するようになります。発光というか、正確には半透明にしているわけです。これで光っているかのように見えます。
    クロスブラウザ対応のテクニックのようなので、どんどん使っても問題なさそうです。
    半透明具合を調節したい場合も、CSS の方で変更できます。上記の 9、10、11 行目には 0.6 とか 60 といった数字が記載されていますが、これは透明度を表しています。なので、数字を小さくすると透明度が増してより発光しているように見えますし、数字を大きくすると変化が乏しくなります。
    ちなみに上記の書き方は、アイキャッチだけに適用される書き方です。気になった方はぜひ試してみてください。

    参考にさせて頂いたブログ

    ― Design Plus
    ありがとうございました!

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

    複数のライターでブログを運営したいと思ったことはありませんか?
    例えばニュースサイトを運営していて、記者ごとに記事を投稿できるようにしたい。
    自社のスタッフに交代でブログを更新させたい。
    自作自演で 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 の使い方に慣れていきましょう。

  • WordPressの記事一覧にアイキャッチを表示させてみた(+αで個別記事にも)

    Twenty Elevenにアイキャッチを実装やっとできました! アイキャッチの表示。
    アイキャッチとは、その名の通り目をキャッチするためのもので、一般的には画像・写真が使われています。人は写真に注意を惹きつけられてしまう癖があるため、ブログなどの記事に注目してもらうためにこのアイキャッチが有効なのです。
    WordPress にも実装されていて、アイキャッチ、またはサムネイルなどと呼ばれています。テーマによってはただ写真をアップロードするだけで表示されるものもありますが、中には自分でカスタマイズしないと表示されないテーマもあります。
    ですので、ここでアイキャッチ(サムネイル)の一般的な実装方法について試行錯誤して分かったことをまとめておきたいと思います。

    アイキャッチ画像を設定すると、ブログが消えた!?

    とにかく、めちゃくちゃ苦労しました。ワードプレスの記事投稿画面に「アイキャッチ画像を設定」という項目があるので、そこから簡単に設定できるものと思っていたのですが、どうもカスタマイズの過程でいろいろいじった結果、表示がされなくなってしまっていたようです・・・。
    表示がされないどころか、アイキャッチに画像を追加すると、ブログ記事自体が見れなくなるという困った現象が起きてしまいました。それを解決するため、テンプレートを初期状態に戻して試してみたところうまくいったので、その方法をメモしておきたいと思います。
    ただし、何が原因で(どのカスタマイズが原因で)アイキャッチ画像のを設定するとブログが消えてしまったのかは、現在も不明なままです。

    アイキャッチ画像の設定方法

    ワードプレス投稿画面のアイキャッチ画像まず、最新の WordPress(Ver.3.3.1以降)を使用しているのであれば、記事投稿画面の右下に【 アイキャッチ画像 】という部分があると思います。
    この記事では WordPress Ver.4.2.2 の仕様に基づいて説明していきます。
    また、解説で仕様している画像やコードは Twenty Eleven のものです。
    Twenty Eleven はデフォルトの状態ではアイキャッチが表示されない仕様なので、Twenty Eleven をのカスタマイズで学んだ方がいいと思い取り上げています。
    もし WordPressの バージョンに問題がないのに、【 アイキャッチ画像 】という設定項目が表示されていない場合は、右上の【 表示オプション 】を開いてみてください。
    【 画面に表示 】の中の【 アイキャッチ画像 】のチェックボックスのチェックが外れているかと思いますので、チェックを入れてください。そうするとアイキャチを設定するウィジェットが表示されるはずです。

    この記事の解説で使用しているWordPressやテーマのバージョン
    ・WordPressのバージョン:4.2.2
    ・テーマ:Twenty Eleven Ver.2.1

    アイキャッチ画像のアップロード

    アイキャッチ画像をまずは選びましょう。【 アイキャッチ画像を設定 】をクリックすると、画像のアップロード用ウィンドウが開きます。新たにアイキャッチ用の画像をアップロードしてもいいですし、既にアップロード済みの画像を使っても構いません。
    アイキャチ画像をアップロード
    画像を選択したら、「アイキャッチ画像として使用」という選択肢があるので、こちらをクリックすれば、アイキャッチ画像の設定は完了です。右下にもアイキャッチ画像が確認できると思います。
    ワードプレスでアイキャッチ画像を使用

    アイキャッチ画像を実装するタグ(基本設定の必要はなし)

    アイキャッチ画像を表示させるためには、PHP のタグを functions.php に書き込まなければなりません。以下がそのタグです。

    <?php add_theme_support('post-thumbnails'); ?>

    ですが、Twenty Eleven の場合このタグはすでに書き込まれています(functions.php の 110 行目辺りです。)ですので、この設定は必要なさそうでした。

    アイキャッチ画像を出力するタグ

    あとは、アイキャッチ画像を表示させたい位置に、アイキャッチを表示してくれる PHP タグを書き込めばいいわけです。
    こちらがそのタグです。

    <?php the_post_thumbnail(); ?>

    表示のさせ方で色々バリエーションがあるようです。

    サムネイル表示(150×150)

    <?php the_post_thumbnail('thumbnail'); ?>

    サイズを100×100(希望のサイズ)に指定

    <?php the_post_thumbnail( array(100,100) ); ?>

    ※【 array(100.50) 】と指定しても、小さい方の50に合わせて正方形表示されてしまうとのこと。

    アイキャッチ画像の表示場所

    アイキャッチ画像を表示させるタグは分かりましたが、どこを見ても「表示させたい位置に配置してください」と書かれているばかりで、具体的にどこに埋め込んだらどこに表示されるのかよく分かりませんでした。
    というわけでいくつか試してみましょう。

    トップページの記事一覧にアイキャッチ画像を表示させる

    アイキャッチ画像は、その名の通り“記事に目を留めてもらう”ことが目的です。ですので、記事一覧のページに表示されなきゃ意味ないですよね……。
    というわけで、トップページの記事一覧や、アーカイブページの一覧表示の部分でアイキャッチ画像が表示されるようにしてみました。
    【 content.php 】を子テーマフォルダ内に複製します。複製したファイルを開くと以下のような部分があります。

    </header><!-- .entry-header -->
    	<?php if ( is_search() ) : // Only display Excerpts for Search ?>
    <div class="entry-summary">
    	<?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
    <?php else : ?>
    <div class="entry-content">
    	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
    	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->
    <?php endif; ?>

    このテーマファイル上の 33 行目辺りで、記事タイトルやメタ情報を出力しているヘッダー部分が終わって、その後にコンテンツ部分が始まっています。今回は 40 行目辺り(上記で言うと 9 行目)の【 <div class=”entry-content”> 】と指定されている部分の後にアイキャッチのタグを埋め込みました。

    </header><!-- .entry-header -->
    <?php if ( is_search() ) : // Only display Excerpts for Search ?>
    <div class="entry-summary">
    	<?php the_excerpt(); ?>
    </div><!-- .entry-summary -->
    <?php else : ?>
    <div class="entry-content">
    	<?php the_post_thumbnail('thumbnail'); ?> /* !追加したアイキャッチ画像表示タグ */
    	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
    	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->
    <?php endif; ?>

    今回は常にサムネイル表示されるタグにしました。大きさは常に 150 × 150 になります。
    すると、こんな感じで表示されました。
    WordPressにアイキャッチを表示

    個別記事にもアイキャッチ画像を表示させてみる

    投稿記事の一覧にはアイキャッチ画像を表示することはできましたが、この記事を見ようと続きを読むなどのリンクをクリックすると、個別記事ページではアイキャッチ画像は表示されなくなります。
    表示されなくても構わないという人もいると思いますが、中には個別記事にもアイキャッチと同じ画像が必要だ! という方もいるでしょう。あなたがそういうタイプかは分かりませんが、個別記事にもアイキャッチ画像を表示させる方法をメモしておきます。
    【 content-single.php 】を開きます。

    <div class="entry-content">
    	<?php the_content(); ?>
    	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->

    こちらは 22 行目辺りに【 <div class=”entry-content”> 】がありますので、このすぐ後にもアイキャッチ画像のタグを埋め込みましょう。

    <div class="entry-content">
    	<?php the_post_thumbnail('thumbnail'); ?> /* !追加したアイキャッチ画像表示のタグ(サムネイル表示バージョン) */
    	<?php the_content(); ?>
    	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->

    すると・・・個別記事にもアイキャッチ画像が表示されました!
    WordPressの個別投稿ページにもアイキャッチを表示
    ちなみに、content-single.php は「標準」で記事投稿した場合のファイルです。その他のフォーマット、例えば「ギャラリー」で投稿した記事をカスタマイズしたい場合は content-gallery.php のファイルを編集します。
    さて、これで問題なく表示されそうです……と思ったのですが、確認してみるとなんだか不格好ですね。
    レイアウトを整えた方が良さそうです。

    アイキャッチ画像のレイアウトを整える

    ただタグを埋め込んだだけでは、画像と記事が縦に並んで表示されるだけです。アイキャッチ画像の大きさがコンテンツを表示させる幅と同じだけあれば自然な表示だと思いますが、今回みたいにサムネイル表示させたり、画像のサイズを小さめで表示させたい場合は右か左に回り込みをしたいところです。
    というわけで、これは CSS の話ですが、アイキャッチが回り込みをして表示されるようにしたいと思います。クラス指定をして【 style.css 】の方でレイアウトをしてもよかったのですが、今回は直接指定してみました。
    以下のタグでアイキャッチ画像の PHP タグを挟めば OK です。

    <span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span>

    回り込みを指定しているので、【 clear: both; 】で回り込み解除をするのが普通ですが、Twenty Eleven の場合は既にメタ情報の部分で回り込み解除が指定されていますので、必要なさそうです。

    .entry-meta {
    	color: #666;
    	clear: both; /* メタ情報は回り込みが解除されるようになっている! */
    	font-size: 12px;
    	line-height: 18px;
    }

    Twenty Eleven の style.css のだいたい 760 行目辺り。
    と、いうわけで、実際の表示はこんな感じですね。
    アイキャッチを回り込ませる
    これでスッキリしました。
    以上、ワードプレスでのアイキャッチ画像設定と表示の方法でした。

    アイキャッチに個別記事ごとのパーマリンクを指定するには?

    ちなみに、今のままだとアイキャッチをクリックして個別記事へ行く事ができないので、アイキャッチ画像に記事ごとのパーマリンクを指定したいと思いませんか?
    そういうわけで、こちらの記事にパーマリンクの設定方法をまとめてみました。

    アイキャッチに個別記事へのパーマリンクを貼る方法

    参考にさせて頂いたブログ

    ― WP MEMO

    ありがとうございました。

  • 無料でメルマガ・ステップメールが発行できるWordPressプラグインAutoresponderの使い方

    こちらで紹介しているプラグインは Ver.2.7.4 以下のものになります。2012.5.1 以降 Ver.4.0 がリリースされ、大きく内容が変わっておりますのでご注意ください。

    プラグインがあれば、なんでもできる!
    いつからか何かやりたい事があれば、まずは WordPress のプラグインを探すようになりました。それで WordPress でもできると分かれば、WordPress のプラグインに乗り換えることも検討する次第です。そんな中、「プラグインを使って WordPress の管理画面からメルマガの発行ができないだろうか・・・」と考えるようになって、色々調べてみました。

    Subscribe2 でメルマガの発行ができる……と思いきや

    最初は Subscribe2 というプラグインが良さげかな〜と思ってました。他のブログやサイトをググってみても、色々なところで紹介されていましたので、まずはためしてみました。しかしこのプラグイン、肝腎なステップメールの配信ができませんでした。

    ステップメールってご存知ですか?

    読者さんに対して 1 通目、2 通目、3 通目・・・とあらかじめ決まったメールを順番に配信していくシステムのことです。これがあれば、メルマガに登録してくれた読者さんに対してあらかじめ用意したメールを順番に送ることができるんです。つまり最初にメルマガを書いて設定をしておけば、あとは全て自動的に読者さんへのフォローアップを行ってくれるというわけです。
    具体的な使い方としては・・・商品を購入した方を自動的にステップメールに登録されるようにしておいて、、、

    • 商品購入 3 日後に商品の使用感を訊ねる文面のメールを送り
    • さらに 3 日後に他のお客さんの声を紹介するメールを送り
    • さらに 3 日後に他のお客さんからの質問&回答を紹介するメールを送り

    というようなシナリオをあらかじめつくっておいて、順番に配信されていくの見守っておけばいいわけです。

    ステップメールでお客さんをファンにする

    このステップメールで外せないのは、あくまでもお客さん個人に送っているメールにすることです。ほとんどのメルマガ配信スタンドには【 名前差し込み機能 】というのがあり、これによって同じメールを一斉に配信したとしても、ちゃんと個別の名前が差し込まれて相手のメールボックに届きます。
    お客さんの名前も自動的に差し込まれてパーソナルなメールのようにできますので、この仕組みを知らないお客さん側からしてみれば、「なんてマメな会社なんだろう!」って感動してくれるはずです(そういう方もまだいるかと思います)。
    このステップを 1 〜 2 週間続けて最後にアップセルやクロスセル、つまり上位商品や関連商品の販売につなげていけば成約率も上がるでしょう! これができないメルマガは、はっきり言ってメルマガじゃないので、このステップメールの仕組みはどうしても必要でした。

    無料でメルマガとステップメールの配信ができるプラグインを発見!

    そんな感じで色々探していたら最終的に WordPress の管理画面からメルマガの発行と、ステップメールの配信ができる無料プラグインを探しているなか、ひとつ、良さそうなプラグインが見つかりました。

    [GWA]Autoresponder(オートレスポンダー)

    日本語だと「自動返信メール」・・・って感じでしょうか? とにかく、ネーミングからすると自動でメルマガを配信してくれそうです。しかし、この Autoresponder は海外のプラグイン、情報も少ない、ということで使い勝手はあまり良さそうではありません。
    とはいいえ、無料でメルマガの配信、そして登録後最大 60 通まで自動でメールを配信することができるのです! もちろん、読者さんの名前も差し込めます。これはすごい・・・。ついにメルマガ配信もここまできたか、という感じでした。
    まぁシナリオは 1 つしかつくれないので、あくまでも初心者向けと言った感じでしょうか。ステップメールを何通もつくって顧客ごとに対応を変えて行く・・・という上級者の使い方をしない限りはこれで十分だと思います。
    と、言うわけで、前置きがだい〜〜〜ぶ長くなってますが、この「[GWA]Autoresponder」というプラグインの使い方を説明して行きたいと思います!

    Autoresponderのインストール方法

    無料でメルマガの発行やステップメールの自動配信ができてしまうWordPressのプラグイン、「Autoresponder」のインストール方法から使い方までを解説してます。
    通常 WordPress のプラグインのインストール方法には 3 通りがあって、ひとつはローカル側にあるプラグインのファイル(zip形式)を WordPress へアップロードするか、FTP を使ってプラグインのフォルダをアップロードする方法。そして、もう一つはプラグインページから目当てのものを検索して、そのままインストールする方法です。
    Autoresponder の場合、前者の方法でいくと販売者にメールアドレスを差し上げることになってしまうので、後者のプラグインページからインストールする方法をオススメします。

    1.プラグインページから検索する

    プラグインのページの「新規追加」というところをクリックすると、プラグインの検索ページに行けます。そこの検索フォームに「autoresponder」と入力して検索すると、上の方に「[GWA] Auto Responder」というプラグインがヒットします。
    プラグインの新規追加
    オートレスポンダーの検索

    2.プラグインを有効化する

    プラグインの説明部分にある「いますぐインストール」をクリックして、しばらく反応を待っていると、「インストール完了」と表示されます。
    そしてその下にある「プラグインを有効化」をクリックすれば OK です。
    プラグインを有効化

    3.プラグインを確認する

    プラグインの有効化に成功すると、WordPress 管理画面のサイドバーに【 [GWA] Autoresponder 】というメニューが現れます。
    オートレスポンダーの確認
    以上で Autoresponder のインストールは終了です。。

    Autoresponderの初期設定

    さて、インストールした後の最初の設定に関してまとめてみたいと思います。
    プラグインをインストールし、有効化した後の設定に関してです。まずは、

    [GWA]Autoresponder > Option > SETUP

    と進みましょう。
    セットアップ画面への行き方

    セットアップ画面の概要

    オートレスポンダーセットアップ画面の概要

    フッター情報の設定

    ① Enter custom message footer to be added to all outgoing email.

    フッター部分のメッセージを入力する部分です。つまり、発行者情報のテンプレートを入力すれば OK です。
    「Enable automatic addition of custom footer to all messages.」と書かれた部分にチェックを入れないと、メールを送ってもフッター情報は表示されないので、必ずチェックを入れておきましょう。

    購読解除リンク用テキストの設定

    ② Enter custom unsubscribe link text for email messages.

    購読解除リンクを表示させる時の、テキストメッセージを入力します。
    デフォルトの設定では「Click to unsubscribe.」と入力されています。意味は「購読解除はこちらクリック」というニュアンスでしょうか。
    ですので、同じような意味の文面を日本語で書いておけば大丈夫でしょう。
    その下にあるチェックボックスには、「Automatically add unsubscribe link to every message sent. 」と書かれています。「この購読解除リンクを全てのメッセージに自動的に挿入すかどうか」を訊いています。

    • チェックした場合
      チェックすれば自動的にメールの一番最後に解除 URL が挿入されます。
    • チェックしない場合
      チェックしなかった場合は自動的に解除 URL は挿入されません。
      ただし、解除 URL をメール本文に記載しておくことは法律で義務づけられている必須事項なので、チェックを外したとしても、毎回配信解除 URL を手動で記載する必要があります。
      つまりチェックは外すな!ということです。

    その他の部分、③〜⑤の設定

    ③ Enter subscription success response to display on weblog.

    読者登録がうまくいった場合のメッセージを入力します。

    ④ Enter unsubscribe success response to display on weblog.

    メルマガの配信解除がうまくいった場合のメッセージを入力します。

    ⑤ Enter subscribe failure text to display on website.

    読者登録がうまくいかなかった場合のメッセージを入力します。

    【 補足 】③~⑤はデフォルトで英語のメッセージがそれぞれ入力されていますが、テストしてみたところ、登録後も解除後も登録失敗時もうまくメッセージが表示されませんでした。
    表示させる方法がはっきりしていないのですが、それでも念のため内容を日本語に変更しておいた方がいいでしょう。

    読者登録フォームをサイドバーに設置する

    次に読者登録フォームを設置しましょう。
    登録フォームに関しては「FORM HTML」と「FLY-IN HTML」の2つがありますが、とりあえず基本的な登録フォームとして使うなら「FORM HTML」で大丈夫です。
    メニュー画面への行き方は・・・

    [GWA]Autoresponder > Option > FORM HTML

    FORM HTML画面の概要

    登録フォーム編集画面

    登録フォームのタグを日本語向けに書き換える

    ①の部分を書き出して、ちょっと体裁を整えてみました。

    <form action="http://example.com/index.php" method="POST" name="ARGWA">
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; padding: 10px;">
    <tr>
    <td>
    <div>
    Name: <input id= "argwa_name" type="text" name="gwaname" value="" size="20"><br />
    Email: <input id="argwa_email" type="text" name="gwaemail" value="" size="20"><br>
    <input type="submit" class="button" value="ADD" name="Add" onclick="return gwaCheckForm1(this.form)">
    </div>
    </td>
    </tr>
    </table>
    <input type="hidden" name="act" value="s_add">
    <input type="hidden" name="listid" value="1">
    </form>

    最低限変更しておいた方がいい箇所は以下の 3 つです。
    「Name」の部分は「お名前」、「Email」の部分は「メールアドレス」、「ADD」の部分は「登録」など、分かりやすいように書き換えてください。

    サイドバーに読者登録フォームを設置する

    上記の部分を書き換えたら、フォームのタグをコピーしてください。次はウィジェットのページへ移動します。
    テンプレートによって若干異なる部分もあるかとは思いますが、「テキスト」というウィジェットが必ずあるはずです。それをサイドバーウィジェットとして使用しますので、ドラッグしてサイドバーエリアへ持って行ってください。
    オートレスポンダー登録フォームサイドバー設置
    次に、テキストウィジェットの右端にある【 ▼ 】をクリックしてテキストウィジェットを開きます。
    そして先ほどコピーした登録フォームのタグをペーストします。「タイトル」の部分は「メルマガ登録」など、適宜入力してください。
    オートレスポンダーサイドバーウィジェット設定
    今回は

    • タイトル ⇒ メルマガ登録はこちら
    • Name: ⇒ お名前:
    • Email: ⇒ Email:
    • ADD ⇒ 登録する

    に変更しました。
    実際にブログ上のサイドバーを確認してみます。
    オートレスポンダー登録フォーム確認
    ちゃんと登録フォームが表示されてました。
    以上で Autoresponder のインストール後の設定は終了です。

    Autoresponderでのメール配信方法

    それでは、いよいよメルマガ配信の方法に関してまとめていきます。

    Welcomeメッセージを編集する

    Welcome メッセージとは、読者さんがメルマガに登録した際に、自動的に読者さんの元へ返信されるメッセージのことです。つまり登録完了メールですね。
    まさにオートレスポンダーという名が示す通りの機能というわけです。
    まずは、この Welcome メッセージを編集していきましょう。
    次の管理画面から、読者登録完了メールの編集、一斉配信メルマガの作成・送信、ステップメールの作成・編集ができます。
    オートレスポンダーメッセージ管理画面

    Welcomeメッセージ編集画面

    まずは以下の手順で登録完了メールの編集画面へ行きます。

    [GWA]Autoresponder > Messages > Welcom > Edit Message

    オートレスポンダーWelcomeメッセージ編集
    すると以下のようなメッセージの編集画面を開くことができます。
    オートレスポンダーメッセージ編集画面

    ① Type

    HTML 形式のメールか、テキストタイプのメールか選ぶことができます。
    テキストタイプを選ぶ場合はプルダウンメニューを開いて、「PLAIN TEXT」を選んでください。

    ② Subject

    登録完了メールの件名を入力します。例えば、「ご登録ありがとうございます。」など、初めて登録した方へ分かりやすい件名にしましょう。
    間違ってもおどろおどろしい件名はやめてくださいね。

    ③ BODY と ④ 差し込みタグ

    メールの本文を入力します。
    デフォルトでは HTML 形式の英語のメールが入力されています。HTML 形式の場合、タグが有効になりますが、改行は <br> などを使う必要があります。
    また、HTML 形式・テキスト形式のどちらの場合でも、差し込みタグが使用できます。
    使用できるタグは以下の3つです。

    • <?Name?>
      読者の名前に変換されます。読者ごとにいちいち名前を差し替える必要はありません。1通つくれば後は読者ごとに名前を変換して送信されます。
    • <?Email?>
      読者のメールアドレスに変換されます。
    • <?Unsubscribe?>
      購読解除リンクに変換されます。Optionメニューで解除リンクを常に表示させるにチェックを入れている場合は改めて使わなくても大丈夫です。

    オートレスポンダー差し込みタグ使用例

    一斉配信のメルマガを作成・送信する

    登録している読者さんに対して一斉にメールを配信する方法です。
    まずは以下の手順でメール作成・送信画面を開きます。

    [GWA]Autoresponder > Messages > SEND MESSAGE

    オートレスポンダーメール配信画面

    ① TYPE

    テキストタイプか、HTML タイプかを選べます。

    ② SUBJECT

    メールの件名を入力します。

    ③ Body

    メールの本文を入力します。使用できる差し込みタグは <?Name?>・<?Email?>・<?Unsubscribe?> の3つで先ほど説明した内容と同じです。

    ④ Select users list

    メール送信対象となるユーザーを選択できます。
    「Send to Subscriber List」と「Send to WordPress Users」のどちらに送るかを選べますが、メルマガ読者に送る場合、「Send to Subscriber List」のままで大丈夫です。

    ⑤ Filter Leads

    オートレスポンダー読者フィルター
    読者に条件を付けて送信対象者を選別することができます。選別基準は登録した日付で、それ以前か以後で 2 通りに分かれています。

    • Send only to leads added after
      指定した日付より後に登録した人たちに送信します。
    • Send only to leads added before
      指定した日より前に登録した人たちに送信します。

    どちらの場合も入力方法は「yyyy-mm-dd」、つまり「年-月-日」の順番で入力します。例えば「2012 年 4 月 15 日」と指定したい場合は、「2012-04-15」と入力すれば OK です。「Send only to leads added before」の部分に「2012-04-15」と入力すれば、2012 年 4 月 15 日以前に登録した読者にのみ、メールが送信されます。

    メッセージを送信する

    メッセージが完成したら、最後に【 Send Message >> 】と書いているボタンをクリックして送信します。ワンクリックで送信完了となるので注意してください。送信済みのメールは、アーカイブとして残るわけではありませんので、必ずバックアップを取るようにしてください。

    Autoresponderでのステップメール配信方法

    ステップメールでは、メルマガ登録をした読者に対して自動的にあらかじめ決まったメールを配信していく機能です。WordPress の無料プラグイン Autorespnder でステップメールを配信する方法を説明していきます。

    Autoresponderのステップメール設定

    Autoresponder には、登録後 60 日までのステップメールを組み込むことができます。
    最初に設定されている「Welcome」のメッセージは0日後という扱いで、その 1 日後、2 日後、3 日後、5 日後、7 日後・・・のようにスケジュールを組んで配信していくことができます。

    [GWA]Autoresponder > Messages > ADD NEW MESSAGE

    オートレスポンダー新規ステップメール作成

    ① Day

    登録した日を 0 日後とし、最大 60 日後までのスケジュールを指定できます。
    0-60 となっていますが、0 日後はデフォルトで設定されているので、ステップを追加する場合は 1 日後から設定してください。
    ※0を指定したり、既に作成済みの日数を入力するとエラーになります。

    ② Type

    テキストタイプか、HTML タイプかを選べます。

    ③ Subject

    ステップメールの件名を入力します。

    ④ BODY

    メールの本文を入力します。新たに加えたステップを確認するステップメールを新規で作成してみましょう。
    こんな感じで入力してみました。
    オートレスポンダーメッセージの新規作成と追加
    入力が終わったら、「Add Message」をクリックして編集を完了させます。すると「Message added successfully.」というメッセージが表示されましたのでメッセージの作成に成功したようです。
    オートレスポンダーメッセージ作成の成功

    作成したメッセージを確認する

    さっそくメールを確認してみましょう。
    上記の「Click here」、もしくはサイドバーメニューの「Messages > MANAGE MESSAGES」から表示できます。
    オートレスポンダー新規メッセージの確認
    うまく追加されているようです。

    注意!

    上記の画面でメールの件名(Subject の項目)をクリックすると、既に作成したメールの編集ができます。
    ただし! メールは日本語で送信する分には問題ないのですが、一度作成したメールを再編集しようとして編集画面を開くと、なぜか文字化けしてしまいます。
    そして1度文字化けしてしまうと(つまり再度編集画面を開くと)その後送信されるメールも文字化けしてしまいます。
    オートレスポンダーメール編集の注意点
    解決策としては、

    ①必ずメールの文面はバックアップを取っておく。
    ②メールを再編集する際は、バックアップした本文を編集して貼付け、そして保存する。

    この 2 点です。
    特にメールのバックアップは必ず取っておいてください。再編集しようと思っても文字化けしてしまうので、同じメール本文を WordPress 上から確認することができません。1 度つくったメールは編集をしない限り件名をクリックしないようにしてください。
    以上、ワードプレスのステップメールプラグイン、[GWA]Autoresponder の使用方法のまとめでした。
    ありがとうございました。

  • メニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法

    これ、よく使う CSS テクニックなのでメモしておきます。サイトの横幅を超えて、ヘッダーやメニューをブラウザの画面一杯に広げる方法です。WordPress の Twenty Eleven に関してのメモですが、CSS のテクニックですし基本は同じなのでどんなテーマでも( WordPress じゃなくても)応用ができると思います。

    2013/01/23 追記
    ヘッダーやグローバルメニュー、フッターなどの要素を親要素をはみ出してブラウザの画面いっぱいに広げる方法です。より単純化して別の記事にまとめました。以下の内容を途中まで理解した上で、スタイルシートの記述に関してはこちらの記事で確認してください。

    【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック


    2013/06/29 追記
    Twenty Twelve をテーマとして使用している場合、少々 CSS の記載に付け加えなければならない点がありました。もし Twenty Twelve を使っていて同様のことをしたい場合はこちらの記事を参考にしてください。

    ヘッダー・フッター・ナビメニューなどを横幅いっぱいに広げるCSSの書き方-Twenty Twelve篇-

    ブラウザの画面いっぱいにグローバルメニューを広げたい

    今回目指しているのは、こんなデザインです。
    ブラウザいっぱいのナビゲーションのサンプル
    よくグローバルメニューやヘッダー部分、あとはフッター部分でよく見るんですが、body 要素の横幅を無視してブラウザの画面一杯に広がるようになっているサイトがありますよね。元からそのようなデザインになっているテーマもありますが、今回は Twenty Eleven のように、そうなってはいないテーマでブラウザいっぱいんに広がる背景を実現しようというわけです。

    仮説)要素をブラウザの画面いっぱいに広げるにはどうしたらいいか?

    どうすればいいかと考えた結果、margin の右と左を負の値で横に広げればいいのではないかと仮説を立てました。margin に負の値を指定すると(ネガティブマージン)要素をはみ出します。しかし、そうすると中身のコンテンツまではみ出てしまうので、padding の右と左に同じ値を正で指定して元の位置まで戻す、という方法でうまくいくのではないか、という仮説です。。。が、言葉で説明が難しいのでこんなイメージです。
    ナビゲーションをブラウザいっぱいに広げる仮説

    結果)サイトの横幅自体が広がって・・・

    で、これを実践してみたのですが、本当にサイトそのものの横幅が広がっちゃって、右側へいくらでもスクロールできてしまう状態に・・・。ぱっと見 OK なんですが、横スクロールバーが拡大してしまい使い物になりませんでした・・・。
    まぁつまり失敗だったわけです。
    メニューを横に広げたら、どこまでも横にスクロールされる

    対策)横スクロールバーの拡大を防ぐ方法を発見!

    ブラウザの画面一杯にメニューやヘッダー or フッターを広げる方法はあまり情報が見つからず苦戦していましたが、ひとつ、参考になったブログを発見したました。

    このブログに書いてあった事は、横スクロールバーが拡大してしまった場合、その拡大を防ぐ方法があるということ。使ったのは CSS の【 overflow 】という要素。

    「ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定するための要素」

    という事でした。
    この【 overflow 】に【 hidden 】と指定すれば、はみ出した部分を表示させないということが可能です。
    以上を踏まえて、Twenty Eleven の CSS を変更してみました。

    ヘッダーやメニューをブラウザの画面一杯に広げるための作業手順

    テーマは Twenty Eleven で試しています。上記のブログに書いている class や id とは異なるので、あくまでも Twenty Eleven の class や id などの要素に対応している記述だという点はご注意ください。また ブラウザ対応も上記のブログに書かれている範囲に止まります。
    ですが、id や class こそ違えど、どんなテーマでも応用ができると思います。

    まずは下準備

    まずは先ほど説明した【 overflow 】の要素を加えます。
    Twenty Eleven の子テーマを作って、以下のスタイルを追記します。

    html {
        overflow: auto;
    }
    body {
        overflow-x: hidden;
        position: relative;
        min-width: 1000px; /* 指定してもしなくてもいいと思います。指定するとブラウザの幅をち縮めても、横幅が 1000px 以下にはならなくなります。 */
    }

    【 html 】という要素は元々 Twenty Eleven の CSS には記述されていませんので、追記してください。【 html 】は【 body 】のさらに親となる要素、、、というイメージでしょうか。
    カスタマイズは、必ず子テーマを作成してから行うのを忘れないように!

    グローバルメニューをブラウザ一杯に広げる

    下準備が整いましたので、まずはグローバルメニューを body の要素をはみ出して、ブラウザ一杯に広がるようにしてみたいと思います。Twenty Eleven のグローバルメニューに関する指定は【 #access 】という部分です。だいたい 540 行目辺りです。
    ※ヘッダー部分のCSS要素に関してはこちらを参考ください。

    WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ


    【 #access 】の【 margin 】と【 padding 】の左右を以下のように指定します。
    どちらとも指定の仕方は【 上 右 下 左 】の順番ですが、4 番目の左を指定しなければ、2 番目の値が “左右同じ” というふうに解釈されます。

    /* =Menu
    -------------------------------------------------------------- */
    #access {
    /* paddingの追記とmarginの変更 */
        padding: 0 500%;
        margin: 0 -500% 6px;
        width: 100%;
    }

    【 margin 】は左右に関しては元々【 auto 】となっていますので、ここにマイナスの値(ネガティブマージンと言うらしい・・・)を入れて body 要素からはみ出させます。margin-bottom が 6px となっているのは、Twenty Eleven の親テーマのスタイルがそのようになっているので、それを引き継いでいます。
    指定する値は【 -500% 】にしていますが、はみ出すくらい大きな値であれば問題ありません。好きな値を入れてください。
    デフォルトでは【 padding 】は何も指定されていません。【 margin 】の左右にはみ出した分だけ、今度はプラスで指定して相殺させるわけですね。
    純粋に margin と padding の左右のみを指定する場合は以下のように書いても OK です。

    #access {
        margin-left: -500%;
        margin-right: -500%
        padding-left: 500%;
        padding-right: 500%;
    }

    するとこんな感じでグローバルメニューがブラウザ一杯に広がります。
    メニューがブラウザいっぱいに広がる
    もちろん、横スクロールバーは出てきません(縦スクロールしかできません)。

    ヘッダーも横一杯に広げてみましょうか

    ついでにヘッダー部分もブラウザ一杯横に広がるようにしてみたいと思います。分かりやすくするために、まずはヘッダーの背景色を黄色にしてみました。

    #branding { /* ヘッダーのデザインを指定するidです */
        background: #ff0; /* 背景色を黄色に指定 */
    }

    親テーマでは 500 行目辺りにありますが、子テーマに【 #branding 】の背景要素【 background(or background-color) 】を追記しています。
    ヘッダーを黄色に
    後はこの黄色の背景が横一杯に広がればいいわけですね。
    下準備が終わっていれば、あとは margin にマイナスの値を、padding にはその絶対値を取るだけです。

    #branding { /* ヘッダーのデザインを指定するidです */
        background: #ff0;
        margin: 0 -500%; /* ネガティブマージンを追記 */
        padding: 0 500%; /* マージンで横へはみ出した部分を相殺 */
    }

    これで黄色の背景が画面一杯に広がりました。
    背景黄色がブラウザいっぱいに広がる

    まとめ

    Twenty Eleven を使っている場合は、最低限以下のようにスタイルを追記すれば、ブラウザいっぱいに広がるヘッダーやナビゲーションメニュー、フッターなどを実現することができます。
    あとは広げたい要素の margin にはマイナス、padding にはプラスを、それぞれ left と right の部分に大きな値を指定しておけばいいわけですね。

    /* はみ出した要素を表示させない */
    html {
        overflow: auto;
    }
    body {
        overflow: hidden;
        position: relative;
    }
    /* 特定の要素をブラウザいっぱい横に広げる */
    id や class {
        padding: 0 500%;
        margin: 0 -500%;
    }
    2015/6/20 追記
    【 overflow-x:hidden; 】よりも【 overflow:hidden; 】とした方が汎用性が高そうです。うまくいかない場合や Twenty Eleven 以外のテーマを使用している場合は、【 overflow 】で試してみてください。詳しくはこちら。

    【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック

    以上です。