Your browser (Internet Explorer 6) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.
X
Post

WP Social Bookmarking Lightでレイアウト崩れてた

wordpressの小ネタです。


先週末から思い立って少しずつプラグインを入れたりしてブログの要素を増やしているのですが、
今日ふと記事の個別ページを見てみたらこのようになっていました。



ブックマークと関連した記事の間で空白ができて、「関連した記事」の項目が下に落ちてしまっています。
まあ、よくあると言えばよくある、divのスタイル指定によるレイアウト崩れです。

確認してみたところ、どうもWP Social Bookmarking Lightが問題らしい。
WP Social Bookmarking Lightはソーシャルブックマークを記事の最後に出力するプラグインですが、
これの最後でfloatをクリアしているため、
そのさらに後ろに別のコンテンツが出力された時にエラーとなっていたようです。


自分はYet Another Related Posts Plugin(YARPP)というプラグインも使っています。
これはその記事と関連性の高い記事へのリンクを出力するプラグインですが、
それがブックマーク出力の後で出力され、レイアウト崩れを起こしていました。
今まで自分がチェックしていた時は右サイドバーがそれほど長くなかったため見落としていました。


解決方法としては、ブックマークプラグインで出力するHTMLを修正しました。
wp-social-bookmarking-light/modules/content.php内の関数「wp_social_bookmarking_light_output」
の中でdivを出力しており、その中にbrタグも含まれていたため最後のbrを削除。

return "<div class='wp_social_bookmarking_light'>{$out}</div><br class='wp_social_bookmarking_light_clear' />";

これのbrを消す事により無事にレイアウトが元に戻りました。


自分はWP Social Bookmarking LightとYARPPとの間でこの問題が起こりましたが、
他にもブックマークの後ろに何らかのコンテンツを出力するような形の時に発生しうる問題かと。

自分は最後のbrタグを消す事により対応しましたが、
他にもスタイルシートの調整や、コンテンツの出力優先順序の変更などでも対応可能かと思います。

TrackBack URL :

  • Straysheep さん、こんにちは。 ご紹介の記事の内容で、私も修正することができました。 ありがとうございます。

    Cypress

    2014年4月28日

  • Cypressさん>
    初めまして、Straysheepです。コメントありがとうございます。

    修正に成功したようでよかったです。

    straysheep

    2014年4月29日

Leave a comment  

name

email

website

Submit comment