Kotoriはマルファン症候群という難病を患っています! 今後は、マルファン症候群に関するトピックも扱っていきます!

パンD KOTORI Blogの公式キャラクター「パンD」です。
コーディングjavascript「もっと見る」を実装(Facebook風)[jQuery|WordPress]

「もっと見る」を実装(Facebook風)[jQuery|WordPress]

2014年06月02日WordPress 便利コード javascript 
「もっと見る」を実装(Facebook風)[jQuery|WordPress]記事のアイキャッチ画像

Facebookと同じ動作の「もっと見る」をjqueryで実装します。その「もっと見る」をWordPressの本文に対して実装する手順も紹介します。

まえがき

「もっと見る」とか「続きを見る」とかのボタンはすっかりお馴染みになりましたね。
普通はそのボタンをクリックしたら詳細ページに飛んでより詳しい情報を得ることができる、という流れだったりするのですが、例えば「もっと見る」をクリックしたらFacebookみたいに続きのテキストが表示されるという動きを実装したい場合もあるかと思います。

今回はFacebookと全く同じ(多分)動作をする「もっと見る」を実装する方法を紹介したいと思います。
jQueryです。それに加えて、WordPressの本文に対してFacebookの「もっと見る」の機能を実装する場合のコードも紹介しようと思います。

サンプル

「もっと見る」サンプル

「もっと見る」を実装するコード

とりあえずWordPressは置いといて、jsの部分から見ていきましょう。
jQueryは読み込まれている前提で進めていきます。

Facebookの「もっと見る」は特に難しい動きもしないので考え方は至って簡単です。
最初の状態で省略されているテキストをspanでマークアップしておき、「もっと見る」がクリックされたら「もっと見る」を非表示にしつつ省略テキストを表示させるだけです。

サンプルを見てもらえばわかるかと思いますが簡単です。
例えばHTMLはこんな感じ。

<div>人の願いがまだ叶っていた昔、一人の王様が住んでいました。娘たちはみな美しく、とりわけ1番下の娘はとても美しかったので、<span class="seemore">...See More</span><span class="disnosp">沢山のものを見てきた太陽もその娘の顔に光を当てたときはいつも驚くばかりでした。</span></div>

jsはこんな感じです。

$(function(){
        $(".seemore").click(function(){
                $(this).next(".disnosp").css("display", "inline");
                $(this).next(".disnosp").addClass("on")
				$(this).css("display", "none");
        });
})

WordPressの本文に対して実装する場合

これをWordPressに絡めようと思うと結構苦労します。てか、苦労しました><
WordPressは良くも悪くも勝手にpタグや改行を挿入してくれますので、それを想定してうまいことやらなければいけません。

とりあえずサンプルを見てください。
「もっと見る」サンプル|WordPress

上記がWordPressで自動挿入されるpタグと改行を生かしつつ「もっと見る」機能を実装したものです。
手順を紹介していきます。

functions.phpに「もっと見る」用の関数を追加

本文を”最初から表示されているテキスト”と”省略されるテキスト”に分ける必要があるのでfunctions.phpにそれ用の関数を書いていきます。

function kotoriexcerpt1($length) {
global $post;
$mb_strlen = mb_strlen($post->post_content); //本文の文字数取得
if($mb_strlen > $length){  //本文の文字数が引数$lengthより多かったら
$content =  mb_substr(strip_tags($post->post_content),0,$length); //HTMLタグを除去して$length値の文字数だけ取得
$content .= '<span class="seemore">...もっと見る</span>' ; 
}else{
$content = $post->post_content;
}
return str_replace(array("\r\n","\r","\n"), '', wpautop($content)); //コード自体の改行を削除して自動整形してreturn
}

function kotoriexcerpt2($cut){
global $post;
$content = strip_tags($post->post_content);//HTMLタグを除去して本文を取得
$content = mb_substr( $content , $cut , strlen($content)-$cut,"UTF-8" );//$cutの文字数以降のテキストを取得
return wpautop($content); //自動整形してreturn
}

HTMLタグも文字数としてカウントされるとダメなので本文からHTMLを削除します。
また、「str_replace()」でコード自体の改行を削除しているのは省略されているテキストを表示した時に繋ぎ目にスペースが入ってしまうためです。
その他の詳細はコードのコメントを見てもらえば。

この二つの関数を使用して「もっと見る」を実装していきます。

WordPressの本文を出力するテンプレートは下記のようになります。

<?php 
$loopcounter=0;
if(have_posts()): while(have_posts()): the_post();
$loopcounter++;
?>
<div><div class="visi"><?php echo kotoriexcerpt1(50); ?></div><div class="disnosp"><?php echo kotoriexcerpt2(50); ?></div></div>
<?php
endwhile;endif;
wp_reset_query();
?>

「kotoriexcerpt1」と「kotoriexcerpt2」の引数は最初に表示しておく文字数を入れてください。
サンプルのコードは「50」文字に設定しています。

で、jsはこんな感じ。

$(function(){
        $(".seemore").click(function(){
                $(this).closest('.visi').next(".disnosp").css("display", "inline");
                $(this).prev().prev().next(".disnosp").addClass("on")
				$(this).css("display", "none");
        });
})

cssはこんな感じ。
最初から表示するテキストと省略テキストをそれぞれ「display:inline」にして繋げます。
また、自動挿入されるpタグも繋ぎ目の部分のみ「display:inline」にします。

  	.disnosp{
		display:none;
	}
	.seemore{
		cursor:pointer;
		color:#00F;
	}
	.visi{
		display:inline;
	}
	.visi p:last-child{
		display:inline;
	}
	.disnosp p:first-child{
		display:inline;
	}

完成形は下記。
「もっと見る」サンプル|WordPress

まとめ

クライアントの「Facebookみたいな「もっと見る」を付けたい」という言葉からすべてが始まりました。最初は大したことないと思ってナメテましたが、踏み込んでいくにつれて考えなきゃいけないことが沢山ありめんどくさかったです。
まぁ無事形になってよかった。

因みに、WordPressと絡める場合は本文の文字の色等は変更できないです。本文中のHTMLタグを除去するためです。
Facebookが投稿の文字色等を変更することができない理由が何となく分かった気がします笑

もし、HTMLタグを除去する必要なくFacebookの「もっと見る」を実装できる術を持っている人がいたら、ぜひKoToRiにも教えてほしいです。
KoToRiの書下ろしパンディーをプレゼントしますw

シェアする みんなシェアしてね

フォローする フォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

診断ドットコムでちょっとひと息!
動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事 関連する記事も読んでみてね

コメント