[STINGER5]消えたツイート数…そして、ツイート検索にしてみた

投稿日時: 2015年11月22日投稿者: Develop Admin

ツイート数が取得できなくなりましたが、「しばらくはツイート数も残しておきたいなー」と思っていたものの…。

Twitterのツイート数は取得できなくなりました

日本時間で11月21日の明け方ごろ、Twitterのツイート取得APIの提供が終了しました。（Twitter社としては提供はしていなくて、ユーザーが勝手に使っていただけなのですが…。寂しいものです(^-^;）

[link url=”https://popozure.info/20151120/9811″]

そして、当サイトの記事に表示されるソーシャルカウントには「SNS Count Cache」というプラグインを使用させていただいています。

このプラグインでもこの「Twitterのツイート取得API」を使っています。（ちまたで「count.json」（カウント・ジェイソン）と呼ばれているものです。Twitterのツイート数（カウント）を「JSON（JavaScript Object Notation）形式」で返してくれるAPIです。）

さて、そんなわけで、「SNS Count Cache」の作者さんのブログ「試行錯誤ライフハック」の記事ではシェア数取得の設定から「Twitter」を外すのが推奨されています。

Twitterのシェア数が取得不可となった場合は、[WordPress管理メニュー]→[SNS Count Cache]→[設定]→[シェア基本キャッシュ機能]のセクションで対象SNSからTwitterを一旦はずしてご利用下さい。
[link url=”https://marubon.info/announcement-sns-count-cache-twitter-endpoint-disappearance-5851/”]

設定方法としては、WordPress管理画面から「SNS Count Cache」→「設定」と入って、「Twitter」のチェックをはずして「設定の更新」ボタンを押すだけです。

でも、「設定の更新」を押すと、キャッシュがすべてクリアされます。Σ(ﾟロﾟ)oﾞ

「ツイート数は取得できなくなったけど、しばらくの間は残ってるツイート数の余韻にひたりたい…！Σ(ﾟロﾟ)oﾞ」

でも、「設定の更新」を押すと、キャッシュがすべてクリアされます。Σ(ﾟロﾟ)oﾞ

ということで、しばし放置することにしましたとさ。

めでたし、めでたし。

消えたツイート数

ぽぽろん「あ、あれ？Σ(ﾟロﾟ)oﾞ」

ツイート数が「0」になってます。

この記事は、Pz-LinkCardのキャッシュによると、「8 Tweets」あるはずだったのですが…！Σ(ﾟロﾟ)oﾞ

ぽぽろん「あ、あれ？Σ(ﾟロﾟ)oﾞ」

「SNS Count Cache」の「シェア数」を見てみると、Twitterの件数がどんどんクリアされています。

取得→エラー→エラーで上書きという動きなのかも知れませんが、そういえばそもそもカウントキャッシュは、期限付きデータを扱う「Transients API」を使っていると知った記憶があります。

（でも、postmetaだった気も？普通に上書きされただけかなぁ？Σ(ﾟロﾟ;oﾞ）

いずれにしてもそんなに長くなく消える数字だったのでした(^-^;

と、いうわけで、Twitter取得を解除してみた

上の方に貼った画像のとおり、「Twitter」を外して「設定の更新」を押しました。

数値は全部クリアされて取得されなおしていきます。

ぽぽろん「あぁ…！！Σ(ﾟロﾟ)oﾞ」

ぽぽろん「Twitterのカウント消える前にCSV出力しとけばよかった！Σ(ﾟロﾟ)oﾞ」

まあ、もう無いデータは無いので仕方がないです。

多分、取っておいても、「この記事、10ツイートもされてたぁ、ニヤニヤ」とするくらいしか活用できなかったと思うので良いことにします。

記事下のソーシャルカウントがきになる

ツイート数の表示はしばらく放置のつもりだったものの、現在はどの記事を見ても記事下の「Twitter」のカウント「0」と表示されるだけになります。

そこそこ見ていただいている記事は数個なので、そもそも大半の記事は「0」のままだったのですが、そういうのは気にしないことにします。

ということで、最近流行りの「リスト表示」みたいなのにしちゃおうかと思います。

とはいえ、有名サイトでないと押したところで「リスト」（一覧）なんて出てきません。

…だいたい「[icon name=”twitter” class=”” unprefixed_class=””]見つかりませんでした。」が出てきます。

とりあえず控えめに「検索」と表示することにしました。

「リスト」→「見つかりませんでした。」（リストなんて無かった…！）よりも、「検索」→「見つかりませんでした。」（まあ見つからないこともあるよね！）の方が自分へのダメージが少ない気がします…！Σ(ﾟロﾟ)oﾞ（きっと気のせいですが。）

表示されている記事のURLを取得する「get_the_permalink()」を使ってURLを取得して、「rawurlencode()」を使ってパラメータとして使える文字列にエンコード（「変換」みたいな意味。）して、「ツイート検索URL」のクエリ（Query、「問い合わせ」する部分）のパラメータ部分にくっつけてリンク設定します。

[php title=”sns.php” start-line=”3″ wrap=”true” decode=”true”]<a href=”https://twitter.com/search?f=tweets&q=<?php echo rawurlencode(get_the_permalink()); ?>&src=typd” target=”_blank”>検索</a>[/php]

「検索」がしっくり来ない方は、「検索」という文字を「リスト」とか「！」とか「？」とか「Σ(ﾟロﾟ)oﾞ」とか、お好みで変えてください。

この文字の部分をクリックするとツイート検索になります。

でも、あまりツイートされていないURLや、あまりツイートしていないアカウントからのツイート、古いツイートとかは引っかからないようなので、それなりにシェアされているサイトさんじゃないと、だいたい寂しい結果になりそうです(^-^;

んー、というか、「11月に入ってから自分以外からツイートされたURL」も引っかからないですね(^-^;

あれこれ色んなかたちでURLとか記事名とかで検索して試したところ、最初の「http://」とか「https://」をはずした方が良さそうです。

これだとどうやら数件引っかかるようになりました。

当サイトはSSL対応していないので、記事のURLの先頭の「http://」を空欄に置き換えてみます。

[php title=”sns.php” start-line=”3″ wrap=”true” decode=”true”]<a href=”https://twitter.com/search?f=tweets&q=<?php echo rawurlencode(str_replace(‘http://’,”,get_the_permalink())); ?>&src=typd” target=”_blank”>検索</a>[/php]

SSL対応しているサイトさんの場合は「str_replace(‘http://‘,”,」となっているところを、「str_replace(‘https://‘,”,」とすれば良いかと思います。

ぽぽづれ修正後のsns.php

当サイトでは現在、WordPressテーマとして「STINGER5」を使用しています。

「えじの自由帳」さんの記事を参考にSNSボタンを設置しています。

[link url=”https://popozure.info/20150211/6559″]

一応修正後のsns.phpを書いてみますが、これに対応したsns.cssとsns-icon.pngが必要なので、sns.phpだけをこのまま貼り付けてもちゃんと表示されませんので、あくまでも参考程度にどうぞ。

というわけで、修正後のsns.phpがこんな感じ。

[php title=”sns.php” decode=”true”]<div class=”sns”>
<ul class=”snsb clearfix”>
<li><span class=”sns-count”><a href=”https://twitter.com/search?f=tweets&q=<?php echo rawurlencode(str_replace(‘http://’,”,get_the_permalink())); ?>&src=typd” target=”_blank”>検索</a></span><a href=”https://twitter.com/intent/tweet?url=<?php echo rawurlencode(get_the_permalink()); ?>&text=<?php echo htmlentities(get_the_title()); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=700,height=500,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon twitter”>twitter</span></a></li>
<li><span class=”sns-count”><?php if(function_exists(‘scc_get_share_facebook’)) echo scc_get_share_facebook(); ?></span><a href=”https://www.facebook.com/sharer/sharer.php?u=<?php echo rawurlencode(get_the_permalink()); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=600,height=300,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon facebook”>facebook</span></a></li>
<li><span class=”sns-count”><?php if(function_exists(‘scc_get_share_gplus’)) echo scc_get_share_gplus(); ?></span><a href=”https://plus.google.com/share?url=<?php echo rawurlencode(get_the_permalink()); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=700,height=600,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon gplus”>google+</span></a></li>
<li><span class=”sns-count”><?php if(function_exists(‘scc_get_share_hatebu’)) echo scc_get_share_hatebu(); ?></span><a href=”http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo rawurlencode(get_the_permalink()); ?>&title=<?php echo htmlentities(get_the_title()); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=600,height=400,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon hatebu”>はてなブックマーク</span></a>
<li><span class=”sns-count”><?php if(function_exists(‘scc_get_share_pocket’)) echo scc_get_share_pocket(); ?></span><a href=”http://getpocket.com/edit?url=<?php the_permalink() ?>&title=<?php echo htmlentities(get_the_title()); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=600,height=300,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon pocket”>Pocket</span></a></li>
<li><span class=”sns-count”><?php if(function_exists(‘scc_get_follow_feedly’)) echo scc_get_follow_feedly(); ?></span><a href=”http://cloud.feedly.com/#subscription/feed/https://popozure.info/feed” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=800,height=800,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon feedly”>feedly</span></a></li>
</ul>
</div>
<link rel=”stylesheet” href=”<?php echo get_stylesheet_directory_uri(); ?>/sns.css” />[/php]

あらためて、修正のポイント

「SNS Count Cache」を使ってツイート数を表示している方は、だいたいこんな感じでカウントを表示していると思います。

[php title=”sns.php” start-line=”3″ wrap=”true” decode=”true”]<li><span class=”sns-count”><?php if(function_exists(‘scc_get_share_twitter’)) echo scc_get_share_twitter(); ?></span><a href=”https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>” target=”_blank”><span class=”sns-icon twitter”>twitter</span></a></li>[/php]

さらに、カウントの部分だけ抜き出してみます。

[php title=”sns.php” start-line=”3″ wrap=”true” decode=”true”]<?php if(function_exists(‘scc_get_share_twitter’)) echo scc_get_share_twitter(); ?>[/php]

「if(function_exists(‘scc_get_share_twitter’)」というところで、「SNS Count Cache」が有効化されているかどうか、ツイート取得ができるかどうかを確認して、有効だったら「scc_get_share_twitter()」を使って「ツイート数」の数値を取得します。

この結果、「0」とかが返ってくるので、それを「echo」で出力しています。

では、この部分を差し替えてみます。

[php title=”sns.php” start-line=”3″ wrap=”true” decode=”true”]<?php if(function_exists(‘scc_get_share_twitter’)) echo scc_get_share_twitter(); ?>[/php]
↓
[php title=”sns.php” start-line=”3″ wrap=”true” decode=”true”]<a href=”https://twitter.com/search?f=tweets&q=<?php echo rawurlencode(str_replace(‘http://’,”,get_the_permalink())); ?>&src=typd” target=”_blank”>検索</a>[/php]

これで「0」と表示される代わりに「検索」と表示され、リンクをクリックすると記事URLでツイート検索をしてくれるようになります。

「検索」の文字が青くてアンダーラインが入ってて「即席のテキストリンクっぽくてヤだなぁ」という場合は、Aタグに「style=”text-decoration:none; color: #000; font-size: 11px;”」とか指定しておくとよさそうです。（もちろん分かる方はstyle.cssとかに記述した方がスマートです。）

「text-decoration: none;」が「文字装飾なし」なのでリンク文字にアンダーバーが付かなくなります。「color: #000;」で文字を黒。「font-size: 11px;」で文字の大きさを11ピクセルに指定。文字色とかサイズは数字をお好みで変更すると良いと思います。

今度こそめでたし、めでたし。

では、今回はこの辺で。(^-^)o

[WPプラグイン]STINGER5の関連記事をYARPPにしてみた

投稿日時: 2015年3月17日投稿者: Develop Admin

関連記事を表示させるのに、WordPressプラグインの「Yet Another Related Posts Plugin（YARPP）」を導入してみました。

STINGER5の関連記事

STINGER5にも記事の最後に「関連記事」として、同じカテゴリの記事をランダムで表示してくれます。

色んな記事が目に触れる利点もあるものの、古い記事もランダムに表示されるし、シリーズ記事みたいなのが全然引っかかってきません。

なので、シリーズ記事みたいなのは記事中にリンクを記述する方法を取っていました。

これはこれで良いのですが、前の記事にリンクを追加したりとメンドウです。

内容を評価して順位を決めるYARPP

いくつか関連記事を表示させるプラグインをインストールして試してみたところ、「Yet Another Related Posts Plugin（YARPP）」が良い感じでした。

というか、前に見た時よりすっごい進化してますΣ(ﾟロﾟ)oﾞ

日本語対応はもちろん、設定画面もしっかり作られていて、「あれ？YARPPって、こんな感じだったっけ？Σ(ﾟロﾟ)oﾞ」と思ってしまいました。

表示スタイルも標準で「リスト」形式と、「サムネイル」形式が選べます。

リスト形式はタイトルのみの表示です。

カッコの中の数値は記事の関連度合を表す「スコア（点数）」で、管理者でログインしているときだけ表示されるようです。

サムネイル形式はサムネイルとタイトルが表示されます。

自分でテンプレートファイルを作成する「カスタム」形式も選べます。（いくつかサンプルが付いています）

YARPPのインストール

WordPressの「プラグイン」から「新規追加」を選び、「YARPP」で検索します。

［いますぐインストール］を押して、インストールと有効化を行います。

標準では記事の終わりに「Related Posts:」というタイトルと共に表示されます。

表示の設定

表示の形式や、順序を設定できます。

「Automatically display related content from YARPP Basic on」
自動で表示させる場所を指定します。
「投稿」にチェックをすれば、投稿記事の最後に表示します。
「一度に表示する関連記事」
関連記事として表示する数を指定します。
「リスト」
リスト形式で表示します。
「サムネイル」
サムネイルを表示して、横に並べます。
「カスタム」
自分でテンプレートファイルを用意して、表示をカスタムできます。
「関連記事表示を囲むタグ」
関連記事のタイトルをHTMLタグで記述できます。
例えば「Related posts:」の部分を「関連記事」とかに直せます。
「各関連記事を囲むタグ」
スタイルシートなどに変更すると良さそうです。
「抜粋を表示」
チェックを入れると、抜粋文も表示されます。
「抜粋を囲むタグ」
標準では「<small>」～「</small>」で囲まれています。
改行したい場合には「<p>」～「</p>」にする等。
「関連記事がない時のメッセージ」
該当する関連記事が無い場合に表示されます。空欄にするか、「関連記事がありません」といった感じに直せます。

「サムネイル」の形式にすると、サムネイルとタイトルが表示されるので見栄えが良いです。

STINGER5の関連記事と入れ替えてみる

どうせなので、カスタム形式にして、STINGER5の関連記事と差し替えてみます。

まずは、現在使用しているテーマのフォルダーにYARPPテンプレートファイルを作成します。

子テーマだったら子テーマの入っているフォルダーです。

プラグインのフォルダーでは無いので注意しましょう。

テキストファイルを作成します。

STINGER5のkanren.phpを参考にして同じような形式で表示されるようにします。

[php title=”yarpp-template-stinger5.php” decode=”true”]<?php
/*
YARPP Template: for STINGER5
Description: YARPP template for STINGER5
Author: popozure
*/
echo ‘<div id=”kanren”>’;
if (have_posts()) {
while (have_posts()) : the_post();
echo ‘<dl class=”clearfix”><dt><a href=”‘.get_the_permalink().'”>’;
if (has_post_thumbnail()) {
echo the_post_thumbnail( ‘thumb150’ );
} else {
echo ‘<img src=”‘.get_template_directory_uri().’/images/no-img.png” alt=”no image” title=”no image” width=”100″ height=”100″ />’;
}
echo ‘</a></dt><dd><h5><a href=”‘.get_the_permalink().'”>’.get_the_title().'</a>’;
if (is_super_admin()) {
echo ‘<small> (‘.get_the_score().’)</small>’;
}
echo ‘</h5><div class=”smanone”>’.get_the_excerpt().'</div></dd></dl>’;
endwhile;
} else {
echo ‘<p>関連記事はありませんでした</p>’;
}
echo ‘</div>’;
?>[/php]

[2015/04/30 追記]ログインしていない場合でもスコアが表示されていたため、修正しました。

拡張子に「.php」を指定しつつ、適当な名前で保存します。

今回は「yarpp-template-stinger5.php」としてみました。

YARPPの設定画面から、自分の作成したテンプレートが選べるようになります。

標準の設定では、記事の最後に表示されてしまうので、「投稿」のチェックを外しておきます。

テーマフォルダのkanren.phpの中身を次のとおりにします。

子テーマフォルダなどでファイルが無い場合は、次の空ファイルを作成して「<?php related_posts(); ?>」の一行を書いて保存します。

[php title=”kanren.php” decode=”true”]<?php related_posts(); ?>[/php]

STINGER5の標準の関連記事のように見えつつも、YARPPによる順位づけされた関連表示になりました。

なお、タイトルの後ろの数字は関連度で、管理者でログインした場合のみ見られる数字です。

[2015/04/30 追記]ログインしていない場合でもスコアが表示されていたため、修正しました。

抜粋文の文字を変更する [2015/04/30 追記]

最初に公開したとき、ログインユーザーでなくてもYARPPのスコアが表示されていたので、修正しました。

[php title=”yarpp-template-stinger5.php” start-line=”16″ mark=”2,4″ decode=”true”] echo ‘</a></dt><dd><h5><a href=”‘.get_the_permalink().'”>’.get_the_title().'</a>’;
if (is_super_admin()) {
echo ‘<small> (‘.get_the_score().’)</small>’;
}
echo ‘</h5><div class=”smanone”>’.get_the_excerpt().'</div></dd></dl>’;[/php]

管理者でなくても、ログインユーザーにはスコアを見せたい場合は、「is_super_admin()」を「is_user_logged_in()」にします。

さて、コメントにて、抜粋文の「文字の大きさ」と「文字色」を変更するにはどうしたら良いか質問がありました。

修正するポイントを見てみましょう。

方法1：<small>～</small>タグを付ける

[php title=”yarpp-template-stinger5.php（変更前）” start-line=”19″ mark=”2″ decode=”true”] }
echo ‘<div class=”smanone”>’.get_the_excerpt().'</div>
endwhile;[/php]

[php title=”yarpp-template-stinger5.php（変更後）” start-line=”19″ mark=”2″ decode=”true”] }
echo ‘<div class=”smanone”><small>’.get_the_excerpt().'</small></div>
endwhile;[/php]

「<div class=”smanone”>’.get_the_excerpt().'</div>」に、smallタグを追加して、「<div class=”smanone”><small>‘.get_the_excerpt().’</small></div>」にすることで、「気持ち」文字が小さくなります。

方法2：スタイルシートを修正する

もっと細かく変更したい場合には、style.cssの「#kanren .clearfix dd p {」というところを検索して、「#kanren .clearfix dd {…}」を追加します。

[css title=”style.css（変更前）” start-line=”406″]/* 抜粋文字 */
#kanren .clearfix dd p {
font-size: 13px;
color: #666;
line-height: 18px;
}[/css]

[css title=”style.css（変更後）” start-line=”406″ mark=”2-6″]/* 抜粋文字 */
#kanren .clearfix dd {
font-size: 9px;
color: #888;
line-height: 16px;
}
#kanren .clearfix dd p {
font-size: 13px;
color: #666;
line-height: 18px;
}[/css]

追加したところの「font-size: 9px;」の数字を変更すれば、文字の大きさが変わります。

「color: #888;」を「color: #444;」にすれば濃く、「color: #ccc;」にすれば薄くなります。

「line-height: 16px;を変更すれば、行の間隔が変わります。

文字を小さくすると、標準の「get_the_excerpt()」の文字数の短かさが気になってきそうです。

抜粋文を少し長くした版です。かなりヤッツケです(^-^;

[php title=”yarpp-template-stinger5.php” mark=”20-24″ decode=”true”]<?php
/*
YARPP Template: for STINGER5
Description: YARPP template for STINGER5
Author: popozure
*/
echo ‘<div id=”kanren”>’;
if (have_posts()) {
while (have_posts()) : the_post();
echo ‘<dl class=”clearfix”><dt><a href=”‘.get_the_permalink().'”>’;
if (has_post_thumbnail()) {
echo the_post_thumbnail( ‘thumb150’ );
} else {
echo ‘<img src=”‘.get_template_directory_uri().’/images/no-img.png” alt=”no image” title=”no image” width=”100″ height=”100″ />’;
}
echo ‘</a></dt><dd><h5><a href=”‘.get_the_permalink().'”>’.get_the_title().'</a>’;
if (is_super_admin()) {
echo ‘<small> (‘.get_the_score().’)</small>’;
}
$excerpt = strip_shortcodes(strip_tags(get_the_content()));
if (mb_strlen($excerpt) > 120) {
$excerpt = mb_substr($excerpt,0,120).’…’;
}
echo ‘</h5><div class=”smanone”>’.$excerpt.'</div></dd></dl>’;
endwhile;
} else {
echo ‘<p>関連記事はありませんでした</p>’;
}
echo ‘</div>’;
?>[/php]

21行目と22行目の「120」を変更すると、抜粋文の文字数を変更できます。

見栄えを良くしたいなら、ショートコードなども省かないといけないのですが…とりあえず参考程度に。

[STINGER5]SNSボタンを押したら、別ウィンドウが開くようにしてみた

投稿日時: 2015年2月15日投稿者: Develop Admin

返信

WordPressとかSTINGER5テーマ限定のネタでは無いのですが、SNSボタン設置の続きです。

[link url=”https://popozure.info/20150211/6559″]

SNSボタンを押しても、新しいタブが開くだけだったので、小ウィンドウで開くように直しました。

修正するのは「SNS.php」。

それぞれリンクのAタグのところにある、「target=”_blank”」の直後あたりに、

[html title=”SNS.php 変更前” start-line=”15″ decode=”true”] <li><span class=”sns-count”><?php if(function_exists(‘get_scc_twitter’)) echo get_scc_twitter(); ?></span><a href=”https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>” target=”_blank”><span class=”sns-icon twitter”>twitter</span></a></li>[/html]

「 onclick=”javascript:window.open(this.href, ”, ‘width=600,height=600,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”」を追加します。

[html title=”SNS.php 変更後” start-line=”15″ mark=”1″ decode=”true”] <li><span class=”sns-count”><?php if(function_exists(‘get_scc_twitter’)) echo get_scc_twitter(); ?></span><a href=”https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=600,height=600,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon twitter”>twitter</span></a></li>[/html]

「width=600」が横幅、「height=600」が縦幅なので、適当な数字に直してください。

これを、他のリンクのところにも追加していきます。

[html title=”SNS.php 変更後” start-line=”15″ mark=”1-6″ decode=”true”]<li><span class=”sns-count”><?php if(function_exists(‘get_scc_twitter’)) echo get_scc_twitter(); ?></span><a href=”https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=700,height=500,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon twitter”>twitter</span></a></li>
<li><span class=”sns-count”><?php if(function_exists(‘get_scc_facebook’)) echo get_scc_facebook(); ?></span><a href=”https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=600,height=300,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon facebook”>facebook</span></a></li>
<li><span class=”sns-count”><?php if(function_exists(‘get_scc_gplus’)) echo get_scc_gplus(); ?></span><a href=”https://plus.google.com/share?url=<?php the_permalink(); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=700,height=600,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon gplus”>google+</span></a></li>
<li><span class=”sns-count”><?php if(function_exists(‘get_scc_hatebu’)) echo get_scc_hatebu(); ?></span><a href=”http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=600,height=400,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon hatebu”>はてなブックマーク</span></a>
<li><span class=”sns-count”><?php if(function_exists(‘get_scc_pocket’)) echo get_scc_pocket(); ?></span><a href=”http://getpocket.com/edit?url=<?php the_permalink() ?>&title=<?php echo $title_encode; ?>” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=600,height=300,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon pocket”>Pocket</span></a></li>
<li><span class=”sns-count”><?php echo $fe_count; ?></span><a href=”http://cloud.feedly.com/#subscription/feed/http://xxx.xx.xx/feed” target=”_blank” onclick=”javascript:window.open(this.href, ”, ‘width=800,height=800,resizable=yes,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes’);return false;”><span class=”sns-icon feedly”>feedly</span></a></li>[/html]

これで小窓で開くようになりました。参考までにパラメータの説明を。

javascript:window.open	ウィンドウを開く。
this.href	ウィンドウを開くリンク先として、Aタグで指定された href を指定している。
height=300	高さ：　300px
width=600	幅：　600px
resizable=yes	サイズ変更：　可能
menubar=no	メニューバー：　表示しない
toolbar=no	ツールバー：　表示しない
status=no	ステータスバー：　表示しない
scrollbars=yes	スクロールバー：　表示する
return false;	元々のAタグの機能でクリックしてリンク先に飛ぶのを行わない。これを入れておかないと、javascriptで小窓を開いた上で、元のウィンドウもリンク先へ遷移（せんい）してしまう。

新しく開く小窓の、高さや幅、メニューバーやスクロールバーの表示の有無（yes／no）はお好みで変更しましょう。

「あとで読む」Pocketを登録してみた＆設置してみた

投稿日時: 2015年2月10日投稿者: Develop Admin

「あ、このページ、後で読もうっと(^-^)o」

というとき。

普段からChromeを使っているので、とりあえずスマートフォンでブックマーク→自宅PCのChromeからモバイルのブックマークを開いて→さっき登録したサイトを表示…とやっていたのですが…。

ページを登録して「あとで読む」サービス「Pocket」というのがあるようなので、登録してみました。

Pocketに登録してみたキッカケ

そもそも「Pocket」に興味を持ったのが、こちらのページ。

[link url=”http://calico.xyz/2014/12/12/pocket-3/”]

STINGER5のカスタマイズ記事を沢山扱っていて、ここのところ参考にさせていただいていたサイトさんです。

このページを見て自分も「あとで読む」ボタンを設置してみたいと思ったのと、そもそも普段「あとで読む」をスムーズにできるサービスや機能が無いかなぁと思っていたので良い機会でした。

さっそく登録

Pocketのサイトから登録します。

「Google+アカウント」を持っていれば、連携させてログインすることもできるようです。

メールアドレスで登録する場合、「メールで登録」を押して、氏名やメールアドレスを入力します。

[link url=”https://getpocket.com/”]

自分の場合、見ていたキャリコさんのPocketリンク設置の記事にある「あとで読む」をクリックして、

メールアドレスでPocketに登録して、

そのまま「あとで読む」に登録されました。

Chrome拡張機能

PCのブラウザとして「Chrome」を使っている場合、拡張機能で見ているページをすぐに「あとで見る」に登録する「Save to Pocket」というのがあります。

「Save to Pocket」をインストールすると、Chromeの右上に「Pocket」のアイコンが表示され、「あとで読みたい」と思ったページでクリックすると、直ちに登録してくれます。

~~既に登録されているページの場合、アイコンが赤くなっているので分かります。~~（登録直後に赤くなるだけでした(^-^;）

Androidの「Pocket」アプリ

Android、iOS向けにアプリがあります。

[link url=”https://getpocket.com/android/?ep=1″]

同じアカウントを登録しておくことで、「あとで読む」を共有できます。

外ではスマートフォンで「あとで読む」登録。

休憩時間にはタブレットで「あとで読む」を開く。

家に帰ったらのんびり「あとで読む」を開く。

そんな使い方が出来ます。

さて、Androidの「Pocket」をインストールすると、「共有…」メニューに「Pocket」が表示されます。

「Pocket」を選べば、すぐに「あとで読む」に登録されます。

今まで「共有…」メニューをあまり使っていなかったので知りませんでしたが、最後に使った「共有」のアイコンが表示されるので、次からはそのアイコンを押すだけで「あとで読む」に登録できます。

アプリ「Pocket」を起動すれば、「あとで見る」に登録してある一覧が表示されます。

STINGER5の記事に「あとで読む」を付けてみる

STINGER5の記事タイトルのところに、「あとで読む」ボタンをつけてみました。

[link url=”http://calico.xyz/2014/12/12/pocket-3/”]

[link url=”http://smart-phone.783783783.com/2014/12/11/stinger5-customize-poket/”]

参考にしたキャリコさんのところと同じく、「single.php」の更新日を表示している辺りに追加します。

[2015/11/02追記]※「Pocket」のカウントの取得にはWordPressプラグイン「SNS Cache Count」を利用しています。こちらのプラグインを有効にするとカウントも表示されます。

[php title=”single.php 変更前” start-line=”35″ decode=”true”] <div class=”blogbox”>
<p><span class=”kdate”><i class=”fa fa-calendar”></i> 
<time class=”entry-date” datetime=”<?php the_time(‘c’) ;?>”>
<?php the_time(‘Y/m/d’) ;?>
</time>
 
<?php if ($mtime = get_mtime(‘Y/m/d’)) echo ‘ <i class=”fa fa-repeat”></i>  ‘ , $mtime; ?>
</span> </p>
</div>[/php]

[php title=”single.php 変更後” start-line=”35″ mark=”8-10″ decode=”true”] <div class=”blogbox”>
<p><span class=”kdate”><i class=”fa fa-calendar”></i> 
<time class=”entry-date” datetime=”<?php the_time(‘c’) ;?>”>
<?php the_time(‘Y/m/d’) ;?>
</time>
 
<?php if ($mtime = get_mtime(‘Y/m/d’)) echo ‘ <i class=”fa fa-repeat”></i>  ‘ , $mtime; ?>
 
<span style=”color:#ee4056;”> <i class=”fa fa-check-square”></i></span>
<a href=’http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>’ onclick=”window.open(this.href, ”, ‘height=300, width=600, menubar=no, toolbar=no, scrollbars=yes’); return false;”>あとで読む</a><?php if(function_exists(‘get_scc_pocket’)) echo ‘(‘.get_scc_pocket().’)’; ?>
</span></p>
</div>[/php]

ちゃんと登録もできました。

FontAwesomeが有効ならPocketアイコンが使えます

[2015/11/02追記]

STINGER5では「FontAwesome 4.0.3」というウェブフォントが使用出来るように設定されています。

具体的には header.php に指定があります。

[php title=”header.php” start-line=”47″ decode=”true”]<link href=”//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css” rel=”stylesheet”>[/php]

記事を投稿した頃にはpocketのブランドアイコンが無かったため、参考にしたキャリコさんのところと同じく似たアイコン「[icon name=”check-square” class=”” unprefixed_class=””]check-square」を使用していました。

「FontAwesome 4.4」で「[icon name=”amazon” class=”” unprefixed_class=””]Amazon」や「[icon name=”get-pocket” class=”” unprefixed_class=””]pocket」などのアイコンが追加されているので、FontAwesome 4.4以降を指定している場合、pocketのブランドアイコンで表示させることができます。

header.phpにあるFontAwesomeの指定がを、4.4に変更します。（子テーマを作っている方は、そちらで修正することを推奨します。）

[php title=”header.php” start-line=”47″ decode=”true”]<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>[/php]

上の single.php の修正例の「<i class=”fa fa-check-square”></i>」となっている部分を、

[php title=”single.php” start-line=”43″ decode=”true”]<span style=”color:#ee4056;”> <i class=”fa fa-check-square”></i></span>
<a href=’http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>’ onclick=”window.open(this.href, ”, ‘height=300, width=600, menubar=no, toolbar=no, scrollbars=yes’); return false;”>あとで読む</a><?php if(function_exists(‘get_scc_pocket’)) echo ‘(‘.get_scc_pocket().’)’; ?>[/php]

「<i class=”fa fa-get-pocket”></i>」に変更します。

[php title=”single.php” start-line=”43″ decode=”true”]<span style=”color:#ee4056;”> <i class=”fa fa-get-pocket”></i></span>
<a href=’http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>’ onclick=”window.open(this.href, ”, ‘height=300, width=600, menubar=no, toolbar=no, scrollbars=yes’); return false;”>あとで読む</a><?php if(function_exists(‘get_scc_pocket’)) echo ‘(‘.get_scc_pocket().’)’; ?>[/php]

これで、さらにそれっぽくなります。

まとめ

今までは「ちょい読みしたい」「あとで読みたい」というものもブックマークを使っていました。

基本的にブックマークには「困った時の参考にしたい」ものなどを登録しているので、「ちょい読み」したいものまで登録していると、ごちゃごちゃしてきてしまいます。

Pocketにはタグ機能もあるので、また読みたくなりそうなものには、タグを付けておくと探しやすくなります。

いざというときのためにしっかり登録するブックマークと、「あ、あとで読もう」と気軽に登録するPocketで上手く使い分けられると便利そうです。

この記事で追加したとおり、投稿日のところの「あとで読む」からPocket登録と、このページを「あとで読む」に登録できます。（下のシェアボタンからも登録できます。）

どんな動作をするか確認がてら登録していただけると幸いです。

[STINGER5]番号付リストの文字が欠ける→直った

投稿日時: 2015年2月4日投稿者: Develop Admin

返信

STINGER5に変更したわけなのですが、記事中の左端が欠けているところがあります。

「番号付リスト」に付く数字の左側が欠けてしまう。
枠線の左側が欠けてしまう。（プラグイン「WP-Note」を使用）

とりあえず、数字が欠けてしまうのを直してみようと思います。

スタイルシート（style.css）を眺めてみると、「リスト」の定義がありました。

[css title=”style.css” start-line=”536″ mark=”8″].post ol {
list-style-type: decimal;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin-left: 20px;
margin-left: 20px;
margin-bottom: 20px;
}
.post ol li {
font-size: 17px;
line-height: 27px;
}[/css]

「margin-left: 20px;」を追加してみたところ、リスト番号がちゃんと表示されました。

もうひとつ、同じ定義をしている部分（スマートフォン用）があるので、そちらも同様に直しておきました。

「10px」だと、10の位の数字が欠けてしまいました。100以上のリストを使う場合だと「20px」でも欠けてしまうかも？（そうそう無いですね。）

とりあえず、直さないといけないと思った番号付きリストは直ったので、WP-Noteの枠の方はまたその内考えようと思います。

軽く検索してみたものの、同じ事例が見つからず？

もしかしたらSTINGER5関連では無くて、入れているプラグインに寄る現象なのかも知れません。

↓表示チェック用

番号付リスト・一行目
番号付リスト・二行目
番号付リスト・三行目
番号付リスト・四行目

[2014/02/07追記]

NEXUS7で見たところ、直っていませんでした…。

margin-leftを大きくすると改善されるものの、今度はPCで右に行きすぎちゃったりしそうなので当面放置で。

[STINGER5]背景を黒くしてみた→色々見えなく！

投稿日時: 2015年2月3日投稿者: Develop Admin

返信

WordPressテーマを「STINGER5」に変更したので、設定したメモです。

背景を暗い色にした場合、サイドバーの文字が見えなくなってしまうので文字色を変更してみました。続きを読む →

[WordPress]STINGER5の設定をしてみた

投稿日時: 2015年2月1日投稿者: Develop Admin

WordPressテーマを「STINGER5」に変更したので、設定したメモです。

続きを読む →

[STINGER5]WordPressテーマをSTINGER5にしてみたΣ(ﾟロﾟ)oﾞ

投稿日時: 2015年2月1日投稿者: Develop Admin

返信

「見出しタグを活用したいなぁ」と思っていたところで「STINGER3」に出会って導入していましたが、新バージョンである「STINGER5」に変更してみました。

＊注意＊現在は別のテーマに変更しています。

[link url=”https://popozure.info/20160622/10434″]

STINGER3→STINGER5へ

「3」の次は何故か「5」です。

「STINGER5」サイトのトップページによると、「基本的なレイアウトの考え方はSTINGER3を引き継いだHTML5でレスポンシブです」ということです。

HTML「5」だからSTINGER「5」なのかなぁ？Σ(ﾟロﾟ)o

STINGER5
http://wp-fun.com/

一番特徴的なのは「レスポンシブ」になったこと。（本当はHTML5対応のところ？）

「レスポンシブ＝色んな機種や画面サイズに対応して表示される」ということで、表示幅に合わせて配置を変更してくれます。

PCで見ているときもウィンドウ幅を狭めるとサイドバーが下がったり、記事の表示幅が狭まったり、タブレットやスマートフォンで見たときもいい感じに表示してくれます。

アクセスしてきたユーザーエージェント（User-Agent）で判断してテーマを切り替えたりしていたわけですが、タブレットでもスマートフォンでも「Android」としか判断できなかったり、新しいOSやブラウザが出てくると対応できなかったりしたので、単純に画面幅で配置が変わるのは理にかなっています。

標準だと横幅が780px（ピクセル）を切ったときと、380pxを切ったときで配置が変わるようです。

テーマの「カスタマイズ」から色が指定できる部分も増えました。

普通にバージョンアップ版かと思っていたものの、結構細かいところが変わっているので、そのままテーマを入れ替えるとデザインが変わってしまったりします。

（自分でカスタマイズしてた部分を忘れていて、変わってしまった部分も！）

まずはダウンロード／アップロード

まずは公式サイトからダウンロードします。

「ver20141227」が最新でした。

ダウンロード｜STINGER5
http://wp-fun.com/dl/

アップロードとZIPファイルの解凍。

さくらインターネットを使用しているので、サーバコントロールパネルからファイルマネージャを使って、themesフォルダーにZIPファイルのままアップロードして、「リモートで解凍」をしました。

今回はテーマの変更なので、いきなり適用はせず、ライブプレビューから設定を行います。

「基本色（キーカラー）」の項目が増え、「ブログタイトルなどの色」、「H2見出しの色など」、「更新日欄やコメント欄などの色」、「RSS購読ボタンの色」、「検索バーの色」などが変更できるようになっています。

メニューから「TOP」が無くなった

ページをめくってて、トップに戻ろうと思ったら、メニューのところから「TOP」が無くなっていました。

ヘッダー（header.php）に固定であったトップページ（home_url）へのリンクが削られたようです。

サイト名・ロゴをクリックすればトップページに飛ぶので必須では無いというか、今まで必ず「TOP」が表示されていて文字も変更できなかったので良いですね。

「TOPへのリンクも欲しい！」という場合は、普通にWordPressのダッシュボードから、外観→メニューで、トップページへのリンクを追加すれば良いのでした。

とりあえず、続く。

設定したこととか書いていこうと思います。

続く。

ぽぽでぶ。

【開発環境】ぽぽづれ。

「STINGER5」タグアーカイブ