【WP】WordPressのPress This機能を応用して超個人的なブックマークサイトを作った話

どうも、小野です。個人的なブックマークサイトを作りました。

onocom.bookmark
http://onocom.net/bookmark/

私がネットサーフィンをする中で見つけたサイト、デザインの参考になりそうなサイト、Amazonの面白かった動画等をざっくばらんにブックマークし、後日私が活用するためのサイトです。

ブックマークをいかにしやすくするかといところに焦点をおいた結果、Press Thisという機能を活用するに致しました。

今回はこのサイトを作る過程で肝となった「Press This」という機能とそのカスタマイズ方法をご紹介致します。

WordPressのPress Thisという機能をご存知ですか?

WordPressにひっそりと佇むPress Thisという機能をご存じでしょうか?

この機能の画面を見たことはあるけど、使ったことがない!という人がほとんどなのではないでしょうか?かくいう私も全然使っていませんでした。

ちなみに、Press Thisには以下のようにアクセスします。
管理画面 → ツール → 利用可能なツール

PressThisの機能

Press Thisとは

PressThisとは、外部サイトの紹介記事など書く際に、引用等の負担を減らし、効率よく記事を書くためのツールのことです。

WordPressのCODEX日本語版には以下のような説明がされています。

Press This

Press This」とは、Web ブラウザのブックマーク(お気に入り)を使って WordPress に素早く投稿・発信できる機能です。「Press This」を使うにはツール画面からブックマークレットを作成し、Web サイトを見ている間に引用したいテキスト、画像、動画などを見つけたら、そのブックマークレットを選択して起動します。

Press Thisの使い方

せっかくなのでPress Thisの使い方を動画にしてみました。

途中エラーになったりしていますが取り敢えずPress This、なんかの役にたちそうやなぁっていうのはご確認頂けるのではないでしょうか?

 

Press Thisを活用して簡単にブックマーク記事を投稿出来るサイトを作った

今回、このPress Thisの機能を使って個人的なブックマークサイトを作ったのでご紹介したいと思います。

onocom.bookmark
http://onocom.net/bookmark/

なぜこんなサイトを作ったかと言うと、Chromeのブックマークバーのブックマークが多くなりすぎて、同じサイトのブックマークを何個もしていることがあったから。そんな状況では、そもそもブックマークの意味が無い。

自分のブックマークを横断的に調べられたらいいなぁというのと、面白そうやなぁということで、こんなサイトを作りました。

はてなブックマーク使えば解決するのかもしれませんが、まぁ要するに自己満足です。

このサイトはウェブサービスでもなんでもなく、ただのWordPressのサイトを更新しやすくしただけなので、以下に書き記すことは、onocom.bookmarkの閲覧者には何のメリットももたらしません!

肝になるプログラム

このサイトの肝はPress Thisの本文からPress ThisしようとしてるサイトのURLを取得し、画面キャプチャを自動挿入しているところです。

そうすることで、ブックマークしたいURLにリンクする手間や画面キャプチャを取る手間を省き、一言コメントを入れつつブックマークする(投稿する)事が可能になります。

ブックマークするだけなのにいちいちURLをコピーして・・・なんてやってられないですからね。

それを可能にしたのは、【 press_this_save_post 】 というフィルターフックです。

該当のフィルターフックを使ってPress Thisで投げられたコンテンツ(本文)を以下のように書き換えています。

また、自動で対象のサイトからメディアを取得するのを防ぐために【enable_press_this_media_discovery】フィルターフックをfalseに設定しています。

たったこれだけでPress Thisを使いやすくカスタマイズ出来ました。

めっちゃ簡単!

実際にブックマークする(投稿する)様子を動画にしました。

上記のカスタマイズのおかげで、簡単にブックマークを投稿できるサイトが出来上がりました。しかも画面キャプチャ付きだから、分かりやすい!

地味な機能を弄る喜び

Press This使っている人に出会ったことがないのですが、このブックマークサイトを作ってみて、これは何か他にも使えそうな予感がしました。

そして、誰もいじっていないであろう地味な機能をカスタマイズするっていうのは自己満足するにはピッタリでありました。

皆様も参考に頂ければ幸いです。

Mauticってなんだ?マーケティングオートメーション(MA)ってなんだ?

Mautic Advent Calendar 2016 Day 9 書きます

http://www.adventar.org/calendars/1402

今年も残すところあと23日となりました。月日が経つのは早いものです。

昨日のKatzさんの投稿「Mautic と concrete5 の良い関係 〜 ユーザー情報連携のススメ」に続き、今日は私がMautic Advent Calendarのバトンを受取りました。

本日は、「Mauticってなに?」「マーケティングオートメーションってなに?」という方に向けたブログを書きます。

ただ、かくいう私もマーケティングオートメーションという単語に触れたのもMauticに触れたのも、今年2016年が初めてでした。いわばMautic元年!

マーケティングオートメーションという言葉すら知らなかった私がMauticに出会い、学んだことを、これからMauticに出会い、学んで行く方のためにお伝え出来たらと思っています。

少しでもお役に立てれば幸いです。

マーケティングオートメーション(MA)ってなんだ?

Mauticを紹介する前に、マーケティングオートメーションについてお話をする必要があります。

Mauticはマーケティングオートメーションツールのひとつだからです。

「マーケティングオートメーション?!」

なんだか難しく聞こえますが、安心してください!

できるだけ横文字を使わずに簡単にすすめていきます。

営業活動を自動化しよう

マーケティングオートメーションとは、一言で言うならば企業が行っている営業活動の一部を機械に任せてしまおう(自動化)という仕組みのことです。

マーケティングオートメーションを導入することで、営業活動の効率化を図ることが出来ます。

多分これだけの説明では「?マーク」がたくさん付くと思うので、今年9月のMautic Meetup Nagoyaで発表をした資料から抜粋してマーケティングオートメーションについてもう少し掘り下げて行きましょう。

こんな悩みはありませんか?

こんな悩みありませんか?

メールや電話で問い合わせをもらって意気揚々と営業に行ったものの、受注になかなか結びつかない…

資料作成の時間や打ち合わせの時間、交通費ばかりかさんでしまう。

こんな経験をしている方、結構いらっしゃるのではないでしょうか?

なぜこんなことが起きるのか?それは、問い合わせしてきたお客様の本気度は、お客様によってまちまちだからです。

お客様それぞれの本気度はバラバラ

オープンハウスに来た3組のお客様、どのお客様を接客する?

オープンハウス

例えば、皆さんが分譲住宅を販売する不動産の営業マンだと仮定して考えてみましょう。分譲住宅販売では、大抵の週末に実際の物件でオープンハウスを開催します。

そのオープンハウスに以下の3組のお客様が同時に来場されました。

  1. たまたま近所に分譲住宅が建ったことを知り、時間つぶしに来場したお客様
  2. 結婚を期に住宅購入を検討しているが、まだ分譲住宅にするか、注文住宅にするか、マンションにするか何も決まっていないお客様
  3. 不動産を具体的に検討していて、インターネットを見ていたらちょうど希望のエリア・希望の価格で販売されている物件があったから来場したお客様

もし、あなたが不動産の営業マンで、今月なんとしても1件契約が欲しい。と考えていた場合、どのお客様を真っ先に対応しますか?

ほとんどの方は、本気度の高そうな「3」のお客様に接客を仕掛けたいと思うのでは無いでしょうか?

ただ、実際には接客をして、話を聞いてみないと家を購入したいかどうかといった本気度はわかりません。話を聞いて経験と勘で本気度の高そうなお客様を嗅ぎ分けて行くスキルが必要になります。

しかしそういったスキルは一朝一夕で身につくものではありません。何年も何十年も営業をすることで身につくことだと思います。

本気度によって接客方法も変わるはず

また、お客様の本気度によって接客方法も異なってくるはずです。

「1」のお客様はカタログを渡してご友人を紹介してくださいね。というくらいで、長期的に追客が必要になるお客様。

「2」のお客様は、ぼんやりとはしているものの、近い将来家を買いたいというお客様ですし可能性はゼロではありませんし、カタログを渡してさようならではなく、他社との比較表をメールで送ったり、説明会を開いたりと今後、中期的に追客が必要です。

「3」のお客様は、最後の決断を促す為の追客が必要になります。

本気度によって対応方法も異なってきます

本気度が数値化されたら楽だと思いませんか?

もし接客する時点で、お客様の本気度が数値化されていたら、若手の営業マンでも経験豊富な営業マンも接客がしやすいと思いませんか?

「そんなの無理でしょ?」とお考えのあなた。実は出来るんです。

そう、マーケティングオートメーションツールならね。

本気度の数値化が出来るマーケティングオートメーション

マーケティングオートメーションツールは、ざっくりと以下のことをしてくれます(もちろんもっと機能はたくさんあります)。

  1. ホームページアクセスを匿名の見込客として登録
  2. フォーム送信・資料請求などの際に見込客情報を更新
  3. 設定したタイミングで自動で資料メール等を見込客に送信
  4. 見込客がメールを開いたかどうか、資料をダウンロードしたかどうかを判定
  5. メールを開いたら+10ポイント、ダウンロードしたら+10ポイントと言った具合に、お客様の本気度を数値化

例えば以下のようにマーケティングオートメーションの設定をしたとします。

見込客のスコアリング

この設定で運用すると以下のような見込客のリストが出来上がります。

集まった見込客のリスト

これを見たら、見込客の本気度が一目瞭然ですね。Dさんが一番受注の見込が高そうだとわかります。

このように、マーケティングオートメーションツールは、見込客を自動で収集し、各種案内を自動(もしくは手動)で送信することで見込客にその気を起こさせ、受注確度を高めていってくれます。

もちろん、全自動では無いので営業さんの仕事がゼロになることはありませんが、セミナー開催案内やセミナー参加のお礼といった事務的な営業活動はマーケティングオートメーションツールが代行してくれるはずです。

見込客の選別

マーケティングオートメーションでは、ポイントの機能以外にも、以下の図のように見込客をステージごとに分類して管理することが出来ます。下方のステージに進むにつれて、より受注に結びつきやすい見込客として認識できます。

他のシステムとの連携が重要

マーケティングオートメーションは、営業活動の中間に位置する仕組みです。

そのため、各システムや取り組みとの連携が非常に重要になります。

見込客を取り込む為には、ウェブサイトにアクセスしてもらう仕組みを強化したり、実際にセミナーを開催して名刺交換した方の情報を登録したりという作業が必要ですし、お客様を口説き落とすにはセールスフォースオートメーション(SFA)との連携も必要になるかもしれません。

様々なシステムとの連携が重要

それぞれのシステムとの役割の違い

マーケティングオートメーションツールと、SFA(セールスフォースオートメーション)、CRM(顧客管理システム)との違いは以下のとおりです。

マーケティングオートメーションは特定の個人に向けてアプローチするためのツールではなく、特定の見込客の集合に対してアプローチするところが大きな違いかと思います。

マーケティングオートメーションとセールスフォースオートメーション、顧客管理システムとの違い

ごめんなさい…続きは動画でどうぞ

続いて、Mauticとは何か?について記載しようと思いましたが、力尽きました。ごめんなさい。

おぉ。Mautic面白そうやん!となった方、SlideShareと動画をご参照ください(笑)

明日はこの方

明日、アドベントカレンダーのバトンを受け取るのはなんとKatzさんです。

「名古屋 Mautic コミュニティ活動まとめ」を書いてくださるようです。楽しみ!

 

デモや動作確認や検査などの色々な場面で使うサンプルファイルをGitHubで公開しました【全て無料、商用OK、コピーライト(著者表示)不要】

いちいち検証用のファイルを作るのは面倒だ。

システムの動作検証やクライアントにWordPressの操作を教えに行く時など、今まで適当なファイルを毎回用意していました。

ただ、毎回用意するのもちょっと面倒だったり、適当なファイルって案外適当に作れなかったりするので、そういったデモや動作検証用のサンプルファイルをまとめて作ってGitHubで公開しました。

ダウンロードはこちら

https://github.com/onocom/sample-files-for-demo-use

ライセンスはパブリック・ドメイン(unlicense)です。(一部風景写真も含まれておりますが、それも同様のライセンスです。)

完全に無料ですし、各自の責任において、商用利用にも個人利用にもご自由にご利用下さい!著作権(コピーライト、クレジット)の表記も不要です。

公開しているファイルの紹介

画像ファイル

JPGファイル、PNGファイル、GIFファイル、アニメーションGIFファイル、BMPファイル、TIFFファイルです。

JPGファイルには風景写真も入っています。

sample-jpg.jpg

sample-photo.jpg
(私が撮影したどこの山かも分からぬ風景写真です。こちらもパブリック・ドメインとして公開)

sample-gif.gif

sample-png.png

sample-gif-animation.gif

PDFファイル

パスワード無しのPDFファイルと、パスワード有りのPDFファイルです。
パスワード有りのファイルのパスワードは password です。

sample-pdf.pdf

sample-pdf_need_password.pdf (パスワードは password )

圧縮ファイル

sample-photo.jpgをzip、lzh、tar、tar.gzで圧縮したファイルです。
zipファイルはパスワード設定有りのzipファイルもあります。パスワードは password です。

sample-zip.zip

sample-zip_need_password.zip (パスワードは password )

sample-lzh.lzh

sample-tar.tar

sample-tar-gz.tar.gz

Microsoft Wordファイル

Microsoft Word 2010以降のファイルと、Microsoft Word 2003以前のファイルです。

sample-word_v2010.docx

sample-word_v2003.doc

Microsoft Excelファイル

Microsoft Excel 2010以降のファイルと、Microsoft Excel 2003以前のファイルです。

sample-excel_v2010.xlsx

sample-excel_v2003.xls

Microsoft PowerPointファイル

Microsoft PowerPoint 2010以降のファイルと、Microsoft PowerPoint 2003以前のファイルです。

sample-powerpoint_v2010.pptx

sample-powerpoint_v2003.ppt

まとめ

ちょっとしたことですが、意外とこういうところが作業効率アップにつながるかもしれませんね。

私ぐらいしか使わないかもしれませんが、使っていただいた方で他にもこんなサンプルファイルを使うから作ってくれという希望があればぜひコメントくださいm(_ _)m

3分の動画で学ぶ!無料で使えるスマホ対応WordPressテーマ【Lightning】のインストール方法&カスタマイズ

Lightning & BizVektor アドベントカレンダー3日目です!

「WordPress公式ディレクトリ登録テーマ Lightning & BizVektor 及びVektor,Inc. リリースプラグインに関するアドベントカレンダー」という、非常にニッチ(!?)なアドベントカレンダーがありまして、Lightning開発者の石川さんがブログを書く方を募集していたので飛び入りで書きます!

【WordPress Theme Lightning & BizVektor 他 Advent Calendar 2016】
http://www.adventar.org/calendars/1716

2日目の石川さんから勝手にバトンを引き継いで、3日目の今回はLightningのインストール方法とカスタマイズ方法を動画でサクッと紹介しようと思います。

動画の合計時間は約3分。忙しい方でもサッと視聴いただき、Lightningの良さを感じてもらえたら嬉しいです。

昨日(2日目)の石川さんの記事はこちら
WordPressでCTAを簡単に設置できる機能を強化!ウィジェットでも使用して集客につなげよう!

WordPress公式テーマ Lightningとは

動画を紹介する前にちょっとLightningの紹介を。

Lightningテーマは『株式会社ベクトル(Vektor,Inc.)』が提供するWordPress公式ディレクトリテーマです。

Lightning

特徴は、以下の通り。

  • 専門知識の無い初心者でも、スマホ対応(レスポンシブ対応)したウェブサイトが簡単に作れてしまう!
  • オンラインで簡単に色やロゴを変えられる
  • 推奨プラグインを入れることで、より幅広い設定が可能
  • Bootstrapベースのため、ウェブ制作を生業にしている方でもカスタマイズがしやすい

一言で言うと『初心者から上級者まで誰にでも使いやすく、カスタマイズし易い公式ディレクトリテーマ』です。

今回、その特徴を端的にお伝えするためにインストールからカスタマイズまでの操作動画を作ってみました。

Lightning のインストール方法

では、早速Lightningテーマのインストール方法からスタート。

なお、既にWordPressをインストールしてあるものとして話を進めます。

インストールはWordPressの管理画面から簡単に行えます。

字幕をONにすると動画下部に操作説明が表示されます。

Lightning のカスタマイズ

ヘッダーのロゴ、キーカラー、トップページのスライドショーを変更してみます。

ツールバーのカスタマイズから簡単に色々な変更が出来てしまうという素晴らしさ!

字幕をONにすると動画下部に操作説明が表示されます。

すごいぞLightning

いやぁ簡単ですね!たった3分でここまで出来るLightningテーマ!すごい!

今回は、Lightningのほんの一部のカスタマイズしか紹介していません。

他の部分のカスタマイズはぜひご自身で試してみてくださいね。

では、4日目の誰かにバトンタッチ!

【WP】[Beaver Builder - WordPressページビルダー]プラグインのカスタマイズメモ

WordPressのプラグイン「Beaver Builder- WordPressページビルダー」が個人的に熱い

WordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。

しかし、記事をレイアウトしようとすると、途端に難易度が上がります。

コンテンツを2カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。

テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。

じゃあconcrete5で良いじゃないか!と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。

そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインです。

Beaver Page Builderのカスタマイズ

[Beaver Builder-WordPressページビルダー]のプラグインページはこちら

Beaver Builderで何ができるのか?

どんなことができるかの説明は、きっと以下の動画を見てもらった方が早い。

要はWordPressのコンテンツエリアを見たまま直接編集できる。というプラグインです。レイアウトとモジュールという部品を組み合わせて複雑なページを簡単に実装できます。

まじで簡単だから感動した。そしてサクサク動くのも素敵。

WordPressの公式プラグインディレクトリでは、無料でlite-versionが配布されており、公式サイトより有料版を買うと、さらに多くのモジュールが追加され、より高度なページを簡単に実装できるようになるようです。

という私はまだ無料版しか使っていない(^_^;)

実際に触ってみたいという方は、公式サイトの「Try the Demo」ボタンからお試しで操作を行えます。

ちなみにしっかりと日本語の翻訳も完了しているため、私のような英語の苦手な日本人にもスムーズに操作することが出来ます。(翻訳してくださった方ありがとうございますm(_ _)m)

 

Beaver Builderで困ったこと

無料版だからだと思うのですが、しょっちゅう「どのテンプレートを選ぶ?」的なメッセージボックスが表示されます。もちろん無料版だし、有料版にしてほしい。という気持ちもわからないでも無いけども、ちょっと鬱陶しい。

しょっちゅう表示されるテンプレート選択画面

該当の表示はJavaScriptで制御しているようで、その制御の設定をPHPで出力していました。

beaver-builder-lite-version\includes\ui-js-config.php

なんやかんやソースコードを追っていくと、上記の ‘enabledTemplates’ => ‘core’,の部分を「disabled」に変更してあげれば、該当の表示はしなくなるようでした。

丁度設定用のフィルターフック’fl_builder_ui_js_config’があったので、以下のようなフィルターを追加することで、しょっちゅう出てきたメッセージを表示させなくすることが出来ました。

ただ、この方法だと、テンプレートボタンを押しても何も反応しなくなるので要注意。

お客様に納品する際はテンプレートボタンを非表示にするCSS等を入れてあげましょう。こんな感じで動くかと。

 

まとめ

まだまだ奥が深そうな【Beaver Builder – WordPressページビルダー】。これからも活用していきます。