Game Users Share Buttons v1.2.1 更新情報

WordPress のプラグインで利用した際に、Top(記事の上) と Bottom(記事の下)に指定したシェアボタンの詳細設定を行えるようにしました。

Top & Bottom 詳細設定


シェアボタンを表示するページを指定できます。トップページ、個別投稿ページ、固定ページ、アーカイブページ、それぞれ表示したい場所をチェックして保存してください。

トップページやアーカイブページは通常、記事が一覧で表示されます。そしてそれぞれの記事部分にシェアボタンが表示されるのですが、各記事のシェア数を個別に取得しているわけではないので、実質トップページならトップページのシェア数が表示されているだけです(複数のシェアボタンに同じシェア数が表示されています)

そのため、一覧ページでは記事ごとにシェアボタンを表示する意味はないのではないかと考え、トップページやアーカイブページなどでは、シェアボタンを表示しない設定を行えるようにしました。

またこれまでは、シェアボタン編集 → 余白設定で記事とシェアボタンの間隔を調整していましたが、画像の余白欄で、Top と Bottom の間隔を個別に設定できるようにしました。今後はこちらで余白を設定していただけるとありがたいです。

簡単に貼り付けられる Code を表示


編集タブに表示されているシェアボタンを簡単に貼り付けられるコードを表示するようにしました。

Code 1: 1ページにつきひとつだけ貼ってください。

<script type="text/javascript" src="https://example.com/blog/wp-content/plugins/game-users-share-buttons/js/share-bundle.min.js"></script>

Code 2: シェアボタンを表示したい場所に貼ってください。

<div data-game-users-share-buttons="gameusers1-m2a4oi43"></div>

Code ボタンを押すとテキストエリアが開いて上記のようなコードが表示されます。記事の上部・下部以外に貼り付けたい場合は、テキストエリアに表示されているコードを利用してください。

貼り付けコードを変更しました


これは大きな変更なのですが、シェアボタンを貼り付けるためのコードを変更しました。

変更前

<div id="game-users-share-buttons" data-theme="gameusers1-olxdmwzh"></div>

変更後

<div data-game-users-share-buttons="gameusers1-olxdmwzh"></div>

HTML の仕様では、同じ id が複数存在しているのは間違いということを知り、修正を行いました。今後は id ではなく、data 属性を利用して、Game Users Share Buttons の表示を行います。

コードを貼り付けて利用している方がおられましたら、お手数ですがシェアボタンを再ダウンロードし、貼り付けコードの変更を行ってください。

Feedly のシェアが行えなくなっていた問題を修正


Feedly の仕様が変更されたようで、シェアが正常に行えなくなっていましたが、v.1.2.1 で修正を行いました。

リンク


ブログの記事を書く時に便利なChrome拡張機能を紹介します!

ブログの記事を書いていてリンクを貼る時ってみなさんどうしていますか?

自分は今までページのタイトルは、右クリック → ページのソースを表示 → <title>タグからコピー、URLはブラウザのアドレス部分からコピーして、WordPress にそれぞれ貼り付けてリンクを作成していたのですが、この作業を右クリックのメニューから一発でできるようになる便利な Chrome 拡張機能を発見したので、紹介させてもらいます

Lightning Blog Tools / 作者の解説ページ

 

Chrome上で右クリックしたところ

Lightning Blog Tools を Chrome にインストールしてから、Chrome 上で右クリックしてメニューを開くと、ライトニングツールという欄が出てくるので、そこでHTMLリンクという項目を選択すると、クリップボードに以下のタグがコピーされます(使うときはキーボードの Ctrl + V を押すか、右クリックで貼り付けを選びましょう)

<a href="https://gameusers.org/dev/blog/" target="_blank">Game Users 開発ノート – 一緒に開発しよう!</a>

なんとタグ付きで今見ているページのリンクがコピーされるのです。今までいちいち面倒なことをしてリンクを作成していたのが、一瞬で終わるこの便利さ!リンクは不要でページのタイトルだけ取得したい場合は、サイトタイトル抽出を選ぶとタイトルだけが取得されます。

さらに踏み込んだ使い方


右クリック > ライトニングツール > Options を選ぶと、画像のページが開きます。

難しそうに見えますが、慣れればすごく便利な設定が行えます。テキスト引用、HTMLリンク、サイトタイトル抽出は元から入っている設定で、<strong>赤色は自作した機能です。

 

自作した<strong>赤色を使ってみる

画像のように文字を選択してから、右クリック > ライトニングツール > <strong> を選ぶと、以下の内容がクリップボードにコピーされます。

<strong style="color: #ff0000;">Game Users Share Buttons</strong>

strong タグは文字を強調するときに使うタグなのですが、選択した文字が strong タグに囲まれてコピーされました。このように設定したタグを自在に扱うことができるようになります。

 

<pre>コード入力用

このブログではプログラム関係のコードを掲載することが多いので、黒色の <pre> タグをよく使っているのですが、Lightning Blog Tools で設定を行っているので、記事の投稿フォームで右クリックから簡単に貼れるようになっています。

<pre style="color: #ffffff; background-color: #000000;"></pre>

Options のページにコード挿入という欄がありますので、独自のコードを貼り付けたいときはここで設定を行いましょう。

タグ挿入コード挿入は予め設定しておいたコードを右クリックから簡単に貼り付けることができる機能です。

ブログの記事を書いているときに頻繁に利用するタグがある場合は、予め Lightning Blog Tools で設定しておくと、右クリックから簡単に貼り付けることができるようになってとても便利です。

最後に


プログラム関係の知識がない方には、ちょっと難しく感じるかもしれませんが、慣れれば誰でもできるようになりますので、ブログを持っている方はぜひ活用してみてください。

記事作成の時間が短縮できるのですごくいいですよ!