カテゴリー: WordPress

WordPress に関係する記事。テーマやプラグインのことを綴っています。

  • 「この記事は~分で読めます」のコードがそもそも間違ってる説 & 導入している理由

    「この記事は~分で読めます」のコードがそもそも間違ってる説 & 導入している理由

    今村界では日本一有名だという今村だけがわかるブログさんの記事に完全に刺激を受けて書いています。

    是非・このブログの場合・そもそも論・ふわっとした感想で構成しました。

    巷に溢れる「~分で読めます」っていう WordPress 用のコードが間違ってるとぼくは思っていて。

    そもそも、前提条件である文字数がおかしいんじゃないのかな?

    是非から。

     

    「この記事は~分で読めます」を入れるかどうかの是非

    主観でいいんじゃないですか?

    入れたい人は入れればいい、入れたくない人は入れなくていい。

    自分のブログなんですから。

    誰にケチを付けられようと譲らない姿勢、嫌いじゃないです。

    ちなみにぼくは記事の日付と本文以外目に入らないタイプです。

     

    このブログの場合

    実はこっそり、「この記事はだいたい~分ぐらいで読めるよ」ってのを入れてます。

    文字数のところにさりげなく。

     

    なぜ入れるのか、その理由

    これに関しては webcre8 さんの記事、メタ情報としてって理由と似てます。

    読める時間は副次的な要素、むしろ、文字数を表記することが重要だと思っていて。

    なおかつ文字数をただのメタデータとしてではなく、構造化データマークアップに使えるというのが大きな理由。(※構造化データマークアップについては Google ウェブマスターのヘルプを参照されるといいかも

    ぼくの場合は microdata を使って記述。

    <article itemscope itemtype="http://schema.org/BlogPosting">
    	…
    	<meta itemprop="wordCount" content="xxxx" />
    	…
    	<span>x,xxx 文字</span>
    	…
    </article>

    ※デザインの都合上メタタグ

    構造化データマークアップをすることで、検索エンジンがサイトの情報を解釈しやすくなるんですねー。

    検索エンジンさんに記事の文字数をお知らせするついでに、ホバーアクションで読める時間を表示した、それが理由です。

     

    コードがそもそも間違ってる

    Google で “記事は~分で読めます” を検索して無作為にいくつか WordPress 用のコードが書いてあるのを見繕ってみました。

    だいたいにおいてこんな感じのコードでした。

    <?php
    /*
     * わかりやすいように処理をひとつずつ書いてます
     */
    
    global $post;
    // 投稿のコンテンツを取得
    $content = $post->post_content;
    // タグを除去
    $content = strip_tags( $content );
    // マルチバイトな文字列の長さを得る
    $content = mb_strlen( $content );
    // 600文字を1分で読める計算をする
    $read_count = round( $content / 600 ) + 1;
    ?>

     

    たとえば、キャプション付きの画像があるこんなページ。

    サンプル
    サンプル

    このキャプションだけのコンテンツを前述のコード途中、文字数を出力してみると、おや。

    91文字…
    91文字…

    なんと 91文字。

    これ、ぜったいウソですよね。

    ショートコードを省く処理が入ってないので、文字数が知らない間に水増しされるという…。

    ですから、「この記事は~分で読めます」を計算している文字数がそもそも違う。

    ギャラリーやプラグインのショートコードを使っている場合も上記に同じく。

    ちなみに執筆時点で、“分で読めます strip_shortcodes” の検索結果は皆無でした。

     

    おそらく、正しいコード

    ショートコードを省く処理を入れます。

    あと、空白も1文字としてカウントされるので、空白も消し去って文字数を取得してあげましょう。

    <?php
    global $post;
    // 投稿のコンテンツを取得
    $content = $post->post_content;
    // タグを除去
    $content = strip_tags( $content );
    // ショートコードを消し去る
    $content = strip_shortcodes( $content );
    // 空白文字列を消し去る
    $content = preg_replace( '/(\015\012)|(\015)|(\012)/', '', $content );
    // マルチバイトな文字列の長さを得る
    $word_count = mb_strlen( $content );
    // 600文字を1分で読める計算をする
    $read_count = round( $word_count / 600 ) + 1;
    ?>

    文字数がきちんとカウントされるはず。

     

    ホホまとめ

    ぼくが思う結論としましては、どんな情報であれ自分の中で精査・反芻できればベストだなーと。

    理由付け・考えるキッカケができるのでね。

    とはいえ、時間の制約・技術など限られたリソースをどこに割くかというのも悩みどころ。

    偉そうに書いてはいますが、自分への戒めが8割方であり。

    こうやって色々推敲するのは楽しいものですね。

    \この記事は2時間で書きました/

  • WordPress 管理画面の投稿一覧にアイキャッチを表示すると見やすい。そして野良プラグイン化。

    WordPress 管理画面の投稿一覧にアイキャッチを表示すると見やすい。そして野良プラグイン化。

    WordPress の管理画面から見られる投稿の一覧にアイキャッチがあれば便利だなーと思ったので実装。

    パッと見てわかるようになりますよ。

    2014.03.13 いらない消し忘れたコードあったので修正しました

     

    使ったフック

    投稿のカラムを触るフックたち。

    Codex にはお世話になってます。

     

    投稿一覧にアイキャッチを表示するために実装したコード

    以前、投稿一覧に ID を出力するってやつを書いたんですが、似た感じです。

    今回はアイキャッチだけ。

    // カラムタイトルにフック
    add_filter( 'manage_posts_columns', 'add_thumb_columns' );
    // 各カラム行にフック
    add_action( 'manage_posts_custom_column', 'add_thumb_column', 10, 2 );
    
    /**
     * 投稿一覧の行タイトルに thumb を配列キーとした dashicon を追加
     *
     * @param $columns
     *
     * @return mixed
     */
    function add_thumb_columns( $columns ) {
    	// サムネイル用のスタイル
    	echo '<style>.column-thumb{width:80px;}</style>';
    
    	// サムネイルをカラム先頭に追加するため array_reverse で挟み込んで追加
    	$columns          = array_reverse( $columns, true );
    	$columns['thumb'] = '<div class="dashicons dashicons-format-image"></div>';
    	$columns          = array_reverse( $columns, true );
    
    	return $columns;
    }
    
    /**
     * 投稿一覧の各行にサムネイル出力
     *
     * @param $column
     * @param $post_id
     */
    function add_thumb_column( $column, $post_id ) {
    	switch ( $column ) {
    		// 行のキーが thumb なら アイキャッチ を出力
    		case 'thumb':
    			// アイキャッチがある場合
    			if ( $thumb = get_the_post_thumbnail( $post_id, array( 80, 80 ) ) ) {
    				// 編集権限、ゴミ箱内かどうかの判別用変数
    				$user_can_edit = current_user_can( 'edit_post', $post_id );
    				$is_trash      = isset( $_REQUEST['status'] ) && 'trash' == $_REQUEST['status'];
    				// 編集権限があり、ゴミ箱でないなら画像をリンクつきに
    				if ( ! $is_trash || $user_can_edit ) {
    					$thumb = sprintf( '<a href="%s" title="%s">%s</a>',
    						get_edit_post_link( $post_id, true ),
    						esc_attr( sprintf( __( 'Edit &#8220;%s&#8221;', 'default' ), _draft_or_post_title() ) ),
    						$thumb );
    				}
    				// 出力
    				echo $thumb;
    			}
    			break;
    		default:
    			break;
    	}
    }

     

    とまぁテーマの functions.php に書くならこんな感じで。

    ちなみに WordPress 3.8未満だと Dashicon がないので適宜置き換えてください。

     

    できあがり

    うむ、見やすい。

    Admin_Posts_add_thumbnail_WordPress
    WordPress 管理画面の投稿一覧にアイキャッチが表示される!

     

    野良プラグイン化しました

    テーマに書くのはもうめんどうだ、という方へ。

    野良プラグイン化しました。

    公式に登録するほどの機能ではないので。(あと、ただただめんどくさい

    野良プラグインを安易に入れることは危険なので、そのへん了承して使ってくれたらいいと思います。

    投稿一覧+アイキャッチプラグイン: add-thumb2-admin-posts_v1.1.zip

    インストールして有効化するだけです。

     

    ホホまとめ

    いろいろなところへ簡単に手を加えられる WordPress、楽しいですね。

    難点は記事におこすこと。

    やったことは漏れなく書いていきたいなーなんて。

  • Feedly Insight 0.9.0 をリリースしました。ダッシュボードをやめ、専用ページに。おまけつき。

    Feedly Insight 0.9.0 をリリースしました。ダッシュボードをやめ、専用ページに。おまけつき。

    リリースのお知らせ。

    大幅に変わったことが1点、Jetpack の機能追加が1点となります。

     

    ダッシュボードウィジェットをやめました

    履歴が増えてきて、ダッシュボードでは見づらくなりました。

    設定画面を追加したこともあり、独立したページを作成するように。

    Feedly Insight 専用のメニューに。
    Feedly Insight 専用のメニューに。

     

    これで見やすくなったと思います。

    検索結果の外観は触れてないので、検索結果は残念な感じになってます。

    レスポンシブ対応で次回アップデートに持ち越し。

     

    Jetpack の機能を追加

    なぜか Jetpack に対応することになったので色々追加してます。

    今回は、Twitter ボタンの via 設定を追加しました。

    Jetpack 共有ボタンを有効化して使っている人向け。

    設定 > 共有 のところ、オプションで追加しました。

    Jetpack Twitter ボタン via オプション
    Jetpack Twitter ボタン via オプション

     

    これを設定すると Twitter ボタンが押されてツイート画面に遷移する際、設定した Twitter アカウントへのメンションが自動で入る、というやつです。

    Twitter インテント via サンプル
    Twitter インテント via サンプル

     

    他に、次期 Jetpack で変わるだろう共有ボタンの対応も一応現時点での開発版 Jetpack にて対応してます。

     

    さいごに

    今後の展望は、グラフの表示形式をいろいろ選べるようにしたいなーなんて。

    バグ報告・要望等、待ってます。

  • 思うところあってテーマを一から作り直しました。

    思うところあってテーマを一から作り直しました。

    今まで使っていたテーマはテーマ制作という記事を書くために作ったため、使いやすさ・見た目が若干残念だったものをだましだまし使ってました。

    ちょっと気合いを入れてテーマ制作。IE8以下切り捨て。

    前回の記事更新日から2週間、夜なべしてなかなかカタチになったので変更。

    (トップはまだできてないものの)

     

    使ったもの

    css を 0ベースから書くほどの気合いはなかったんで、フレームワークを使いました。

    Foundation は有名なんで特に書くことはありません。

     

    IE8 以下切り捨ての理由

    Foundation 5 から IE8 切り捨て。

    Foundation 4 を使っても良かったんですが当ブログ最近のアクセスを見ると、

    最近のアクセス、ブラウザ別 Internet Exploler
    最近のアクセス、ブラウザ別 Internet Exploler

    ええと、IE8 以下は、

    13.26% x ( (22.17%+3.15%+1.58%) / 100 ) = 3.56694%。

    全体の 4% 以下なんでこれはもう、いいだろうと。

    ちなみに IE8 以下で見たらえらいことになります。

     

    こだわったところ

    • できる限りの microdata マークアップ
    • 目的のものに辿りつきやすいかどうか
    • 見やすいこと
    • プラグインを減らす方向で
    • ソーシャルボタンは公式のものを使わず、Jetpack のでまかなう。スクリプト削減+高速化。

    みたいなところですかね。

    php, html はフルスクラッチ。

    とりあえず思いつくままに組んでいき。

    作っている最中にどんどん横道に逸れていくのが愉快でもありました。

    アーカイブやカテゴリーの一覧が見やすくなったはず。

     

    ホホまとめ

    あとトップだけ仕上げたら記事を書けるかなーと。

    実際動かしてみると整ってないところ、気になるところがあるのでぼちぼち直しつつ。

     

    プラグイン作ったりしたんである程度見た目の説得力も持たせないとな…と思ったのも理由のひとつかも。

    「ここどうなってんねん」

    などあれば、記事にするのでコメントにでも書いてください。

  • Jetpack の共有にはてブボタンを追加した Feedly Insight 0.8.0 をリリースしました。

    Jetpack の共有にはてブボタンを追加した Feedly Insight 0.8.0 をリリースしました。

    0.7.0 リリース後、

    「どうせならはてブボタンもつけてくれないかしら」

    な声が相次いで届いたため、希望に応えるカタチで実装。

    Feedly 関係ないじゃん!てのは触れないで頂きたく…

     

    できるようになったこと

    Jetpack 共有ボタンにはてなブックマークボタンが増えました。

     

    アイコンとテキストを選択した場合でも、Twitter や Facebook と同じようにカウントが表示されます。

    プラグイン公式ページ で実際動かしてるので、そちらで動きを見てもらうとわかりやすいかも。

    Feedly Insight + はてブボタン
    Feedly Insight + はてブボタン

     

    今後のバージョンアップでは、ダッシュボードでの表示をやめ、専用のメニューを作る予定です。

    要望等ございましたら プラグイン公式ページ までどうぞ。

  • Jetpack の共有に対応した Feedly Insight 0.7.0 をリリースしました。

    Jetpack の共有に対応した Feedly Insight 0.7.0 をリリースしました。

    何気なくいろんなブログを見ていると、Jetpack 共有ボタンを使ってらっしゃるところが多く。

    Jetpack の共有ボタン
    Jetpack の共有ボタン、こんなやつ。

     

    せっかくなんでプラグインで対応しようと思い、実装しました。

     

    Jetpack 共有ボタンとは

    800万ダウンロードを超える、素晴らしく便利なプラグイン Jetpack の、一機能として提供されているやつです。

    共有: 投稿を Twitter、Facebook その他のサービスで共有しましょう。
    共有: 投稿を Twitter、Facebook その他のサービスで共有しましょう。

     

    できるようになったこと

    Jetpack 共有を使ってない方には関係ないです。

    Jetpack 共有を有効化し、設定 > 共有と進むと、共有ボタンを設定できるのですが、

    Jetpack 共有設定
    Jetpack 共有設定

     

    プラグインを更新すると、ここに Feedly ボタンが追加されるようになりました。

    Jetpack 共有設定+Feedly
    Jetpack 共有設定+Feedly

     

    各サイズ、取り揃えており。

    • アイコンとテキスト
    • アイコンのみ
    • テキストのみ
    • 公式ボタン

    どれを選んでもちゃんと表示されます。

     

    Jetpack の共有を使ってる人にはアリだと思います。

    今後も機能追加・バグフィックスなどやっていくので、プラグイン公式ページにコメント頂ければと。

  • WordPress プラグインを公開するためにやったことまとめ

    WordPress プラグインを公開するためにやったことまとめ

    先日 WordPress のプラグインを公開したんで、手順を覚えているうちにメモ。

    登録する際、参考にしたのは公式ページ

    以下、公式ページ手順に従って進めます。

     

    制限事項をチェック

    読む。

    • GNU General Public License v2 かそれ以降との互換が必要。おすすめは “GPLv2 or later.” 。
    • プラグインが違法でない&攻撃的でないこと
    • Subversion のリポジトリを使うこと
    • 使用者の許可無く外部リンクを埋め込まないこと
    • その他ガイドラインに基づくこと

    理解した上で次。

    GPLv2 の適用(記述)方法はライセンスのページに書いてある。

     

    プラグインを作成

    作成して、readme.txt の記述を済ませる。

    readme.txt の記述がダメだと叩き返されるので、ジェネレーター

     

    から readme.txt を作って validator

    で確認するとよし。

    外部 API など使う場合はその旨をユーザーに周知する必要があるため、description に記載。

     

    プラグイン追加のリクエストを送る

    プラグイン追加リクエストページより、

    • プラグインの名前
    • プラグインの説明
    • プラグインzipを作ってアップロードした URL

    を入力して送信。

    プラグイン追加リクエストページ
    プラグイン追加リクエストページ

     

    画面が遷移してメッセージが表示される。

    プラグイン審査云々
    プラグイン審査云々

     

    審査待ちが何件あるとか、メール送信するので受信できるようにしておくこと、など書いてあり。

    この段階でもうプラグイン専用ページが生成される。

    プラグイン審査待ちではあるがプラグインページ
    プラグイン審査待ちではあるがプラグインページ

     

    審査が終わると

    審査で不備があればメールで不備を教えてくれ、審査が無事に通ればこんな感じのメールが届く。

    plugin_request_approved_mail
    プラグインの審査が通りましたよ!

     

    専用ページができるので SVN でコミット

    専用ページができまして、公開の準備OK。

    一度 SVN でコミットを入れればもうプラグイン、公開され。

     

    ホホまとめ

    やったことを書いてるだけなんでほんとただの覚え書きです。

    少しでも誰かのためになればいいな。

  • Feedly Insight 、稚拙ながら WordPress プラグインをリリースしました。

    Feedly Insight 、稚拙ながら WordPress プラグインをリリースしました。

    構想1日、実装ちまちま2週間ほど。

    ようやく世に出せる程度にはなりましたのでお知らせと共に。

     

    プラグインの名前・公式ページ

    名前は Feedly Insight と名付けました。

     

    Feedly はその名の通り、Feedly の情報をうんたらするから。

    Insight はそれっぽい名前を付け足してみた、という感じです。

    意味合いとしては 洞察どうさつ(力), 眼識がんしき識見しきけん など。

     

    Feedly Insight にできること

    現在βバージョン(保険をかけ)としてリリースしています機能は

    • ダッシュボードに専用ウィジェット追加
    • ウィジェットで現在のサイト Feedly 情報表示
    • Feedly の検索API による検索(他サイトの購読者数を取得可能
    • Feedly の RSS購読者数を毎日データベースに保存し、グラフとして可視化(ある程度日数経たないとおもしろくないです

    ができます。

    現在設定画面を必要としてないため、設定画面はなく、ダッシュボード画面での表示のみです。

    今のところ管理画面でしか動かないため、WordPress が重くなる!

    ってことはないかと。

     

    Feedly Insight 使い方

    こうです
    こうです

     

    必要要件

    • WordPress 3.6 以上 (3.3 ぐらいから動くとは思いますが、3.5以下はセキュリティ上好ましくないため
    • PHP バージョン 5.2 以降

     

    Feedly Insight 作ったきっかけ

    「あったら便利かな~」

    をカタチにしただけですはい。

    以前こんな記事を書いたこともあり。

    あとは自分のパフォーマンスアップ、公開することでの忌憚ない意見が欲しいのもあり。

    ある程度の罵倒は受ける覚悟しt (ry

     

    専用ページもつくったよ

    Feedly Insight 専用ページでは日本語サポート・バグ報告・意見募集・使い方など、順次更新します。

    「こんな機能追加しろ」「このクソコードが!」

    などコメント頂けると、気に入ったものは実装したりするつもりです。

     

    さいごに

    今のところベータと名付けている通り、実装ありきで作ったのでコードがしょうもないです。

    読みづらいところや無駄な処理が。

    例外処理もしないと…。

    便利だと思うんでよかったら使ってみてね!

    Feedly がもっと流行ればいい!