【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使っている人に出会ったことがないのですが、このブックマークサイトを作ってみて、これは何か他にも使えそうな予感がしました。

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

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

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ページビルダー】。これからも活用していきます。

[WordPress]WordPress Beta Testerプラグインを利用してWordPressの開発最新版(WordPress 4.5 RC)をテスト環境で簡単に試す方法

WordPressの最新版のVersion 4.5が4月12日頃にリリースされるそうです。開発は順調に進んでいるようです。

WordPress4.5のリリースが待てないという方はこの方法を使って先行して動作確認を行うことが出来ます。

注意

紹介している方法は必ずテスト環境でお試しください。本番サイトでこの方法を採ることはオススメしません。

WordPress Beta Tester プラグインを有効化

「WordPress Beta Tester」プラグインをインストールして、有効化します。

https://wordpress.org/plugins/wordpress-beta-tester/

plugin.PNG

WordPress Beta Tester プラグインの設定

ツール→Beta Testingをクリックして設定画面を表示します。
続いて、「最新版ナイトリービルド」をチェックして変更を保存します。
これで準備OKです。

betatesting.PNG

WordPressの最新版ナイトリービルドに更新

ダッシュボード→更新をクリックしてWordPress の更新画面を開きます。

今すぐ更新をクリックしてWordPressをアップデートします。

無事にアップデートされました。

updated.PNG

まとめ

めっちゃ簡単でしたね。

WordPressはガンガン開発が進んでいるCMSです。

開発の様子も公開されているので興味が有る方は覗いてみてくださいね。

https://make.wordpress.org/core/

 

WordPress 4.5でリリースされる機能の概要が以下の記事で紹介されています。

WordPress 4.5 ベータ 1

https://ja.wordpress.org/2016/02/27/wordpress-4-5-beta-1/

[WordPress]コメント等に使用されるアバターをカスタムフィールドに指定した画像に変更する

コメントのアバターを変えたい

アバターを自分の好みの画像に変更したい

WordPressは、Gravatorというシステムと連動してアバターを表示しています。

Gravatar
https://ja.gravatar.com/

アバターを変更する場合は、このGravatorに自分のメールアドレスを登録する必要があるのですが、結構面倒だと言われることが有ります。

今回、そんな時のために、ユーザカスタムフィールドに画像を登録してもらい、それをアバターとして表示するようにカスタマイズします。

アバターを取得している場所

アバターを取得している処理は、wp-includes/link-template.php のget_avatar_data関数っぽいです。

get_avatar_data関数の以下のフィルターフックの値をフィルタ(add_filter)します。

ちなみにこのフィルタの第一引数の$argsは以下のように設定されています。
$args[“url”]を書き換えてあげればアバターで使用する画像が変わります。

 

functions.php に処理を追加しましょう

さあ、フィルタを使って書き換えて見ましょう。

ちなみに今回はACF(Advanced Custom Fields Plugin)を使っていますので、流用される場合は、適宜修正してくださいね。

お使いのテーマのfunctions.phpに以下を書き込みます。

これをすることで、該当するユーザがコメントの書き込みを行った場合、以下のような$args[“url”]に書き換わり、アバターの画像を変えることができます。

まとめ

WordPressでは、様々なフィルターフックやアクションフックが用意されているため、フックする箇所に目星をつけることができれば、コアファイルを触ること無く簡単に結果を制御できます。

ぜひご活用ください。