はてブ 
pocket 
twitter
WordPressにMediumっぽい機能をつける（随時更新）
に選定していただきました。✌('ω')✌
- 2016-1-26
- テーマカスタマイズ
- 1
今年は色んな所にコンテンツを残していこうって事でいろいろやっております。
今のところMediumとSoundcloudがお気に入り。
Mediumの洗練されているところとコミュニケーション機能は素直によく出来ておりますね。クローンなテーマをWordPressで再現したくなるくらい。でもそうなってくるともうMediumで全部やれよという話しなので、エッセンスだけ拝借したい。
01.WordPressで記事内のテキストを即時につぶやけるように
Mediumだと記事内のテキストを選択すると
選択したテキストに対して、マーカーを引いてハイライトさせたり、直接文節にコメントを付けたりつぶやけたりします。コレ便利よね。
▼自分がハイライトした部分はプロフィールページに表示されたりしてて、ほんとよく出来てる。
jQueryでやれそうやなと当たりをつけたら便利なプラグインがありまして。
How to Add Medium-Like Select and Tweet to WordPress (Plus Free Plugin!) – WPMU DEV
記事下にあるリンクからまとめてファイルをダウンロード出来るので、ありがたすぎた。
環境にあわせて
// actions when the user ends the selection
$('.entry-content').mouseup(function (event) {
var t = $(event.target);
var st = getSelectionText();
このへんとかボタンをつぶやきに表示させるメンション先とかを変更すると吉。
カラーリングをデフォルトから……
/* button body */
.twtshare {
background-image: linear-gradient(to bottom, rgba(49,49,47,0.99), #262625);
}
/* button bottom arrow */
.twtshare:after {
border-color: #262625 transparent transparent transparent;
}
こういう感じに変更しました。変更部分だけ抽出しました。色はMediumまるパクリです。
で、うまいこと動けば……
シェアが捗るよと。
ただ、問題としてはこの機能がこのブログに実装されていることを誰も知らないので、使うのが僕だけってことね。うまいこと読み手に伝える術を考え中。まあね、誰も気がつかないよね。
自己満足の改造です。
ハイライトさせたり直接コメントを表示させたりはちょっとレベル高いので、今のところツイートだけで満足しております。
02.軽量できもちがいいLightbox系エフェクト
▼この記事にも書きましたが
今年は色んな所にコンテンツを残していこうって事でいろいろやっております。 今のところMediumとSoundcloudがお気に入り。 Mediumの洗練されているところとコミュ
2016-01-26 00:56
コレが最強でしょう。ほとんどMediumを完コピしてます。
jQuery (function ($) {
$(".entry-content .aligncenter , .content-main .alignleft , .content-main .alignright").attr("data-action", "zoom");
});
こんな感じで、記事内の特定のクラスにかってに属性が付くようにして使ってます。
↑パソコンからお試しください。
03.読了までの時間をプラグインでさりげなく表示
トップページで実装しています。
コレに関してはWordPressプラグインで導入。
更新が止まっていて古いプラグインなので、自己責任でお願いします。
設定も簡単で助かります。有効化するだけで通常投稿には表示されますが、テーマに組み込む場合は……
<?php estimated_reading_time(); ?>
上のコードでOK。柔軟ですね。
続く。
記事はばらけるかもしれないけども、まとめとして最終的に仕上がれば助かります（僕が）。
Mediumっぽいのがサクッと使えて捗ります。では。
ああ、あと、コレ使えばもっとぽくなるよ！ とか、その機能実装してあげようか？ みたいな方はガンガン@shintarowfreshまで米をよろしくどうぞ。
Mediumとは？
ミディアムは世界の何を変えるのか：Twitterをつくった男の次なる挑戦 ” WIRED.jp
汗と涙で確信した！WordPressブログ初心者だった頃の自分に敢えて厳しめに言いたい10項目 * prasm
爆速でブログを書くために必要なプラグイン3つ * prasm
ブログトップページの投稿日時の表記を相対時間（何時間前）に変更する方法。human_time_diff * prasm
文：シンタロヲフレッシュ
一緒に読んで欲しい記事
