4月
22
2013

テーマ「alltuts」:Related Postsの表示ずれ対策。

WordPress本ブログで使用しているテーマ「alltuts」では、各エントリ本文下に
「Related Posts」があるのですが、それぞれの要素の高さが異なる場合、
ずれて表示される事が判明しまして。高さを揃えてやればよかろうと
言う事で、ブロックレベル要素の高さを揃えるjsライブラリ「heightLine.js」を
使って対応してみました。以下、備忘録。
 

 
1.下記サイトから「heightLine.js」をダウンロード。

to-R – ブロックレベル要素の高さを揃えるheightLine.js

本BLOGは「alltuts」の子テーマを作ってるので、親テーマの
「alltuts」の下にある「js」フォルダにアップロードしておく。
 
 
2.子テーマ側の「header.php」を開き、以下のコードを追加する。

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/heightLine.js"></script>

 
 
3.子テーマ側の「single.php」を開き、113行目あたりにある以下のコードを…

echo '<h2>Related Posts</h2><ul class="relatedPosts">';

下記のように修正する。

echo '<h2>Related Posts</h2><ul class="relatedPosts heightLineParent">';

※ ulのclassにheightLineParentを追記するだけです。
 
 

 


コメントする

*

2017年12月
« 7月    
 123
45678910
11121314151617
18192021222324
25262728293031

Archives

Recommended