2024年3月
« 4月    
 123
45678910
11121314151617
18192021222324
25262728293031
4月20

記事の表示/非表示

PM 10:05
カテゴリー[WordPress]

検索とかカテゴリーとか月別アーカイブとかを表示した時に記事を表示しないようにしたいと思った。
でも、タイトルだけってのも味気ないので記事の部分が簡単に表示/非表示の切り替えが出来たらなって。

いろいろ検索した結果、良いのを見つけた。
ttp://wordpress4cms.net/category/plugins-widgets/
ここのみたいな感じにしたいなって思って、ちょっと調べてみた。
jQueryっていうJavaScriptのライブラリを使って表示/非表示しているみたい。

まず、jQueryを読み込んで、
<script src="jquery.js" type="text/javascript">

WordPress内で書くと、
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.js"></script>

こんな感じ。
で隠したい場所に、
<script type="text/javascript">
$(function () {
$(".text-718").hide();
$(".textopen-718")
.toggle(
function (){
$(".text-718").slideDown({ speed: 200 });
$(".textopen-718").html("クローズ");},
function (){
$(".text-718").hide("fast");
$(".textopen-718").html("オープン");});
});
</script>
<div id="hide" class="textopen-718">オープン</div>
<div class="text-718">
ここに隠したいもの
</div>

WordPress内で書くと、
<script type="text/javascript">
$(function () {
$(".text-<?php the_ID(); ?>").hide();
$(".textopen-<?php the_ID(); ?>")
.toggle(
function (){
$(".text-<?php the_ID(); ?>").slideDown({ speed: 200 });
$(".textopen-<?php the_ID(); ?>").html("<img src='<?php bloginfo('template_url'); ?>/images/close.gif'>");
},
function (){
$(".text-<?php the_ID(); ?>").hide("fast");
$(".textopen-<?php the_ID(); ?>").html("<img src='<?php bloginfo('template_url'); ?>/images/open.gif'>");}
);
});
</script>
<div id="hide" class="textopen-<?php the_ID(); ?>"><img src='<?php bloginfo('template_url'); ?>/images/open.gif'></div><br>
<div class="text-<?php the_ID(); ?>">
<?php the_content(); ?>
</div>

こんな感じです。
これで、記事の表示/非表示が出来るようになりました。

コメントをどうぞ

You must be logged in to post a comment.