はぴすぷ

【WordPress】コメント入力フォームのカスタマイズ③アイコンとコメント数付き見出しの作成

      2015/09/22

昨日更新するとか言っておいて遅れました。でもまだ夜はあけてないからセーフ！

この、コメント入力フォームの上にある見出しの作り方です。

SS_0824

前記事：【WordPress】コメント入力フォームのカスタマイズ②jQueryのスライド機能で表示を切替える

見出しを作るにあたって、部品の前提知識ないと困るかと思って、そっちの方を先に書いてました。

スポンサーリンク

使う部品の説明

Font Awesome

まず見出しの前にアイコンが付いていると思いますが、これは「Font Awesome」というWebフォントを使ったCSSのライブラリを使っています。

WordPressで使っているテーマが「STINGER5」であれば、「関連記事」にアイコンが付いてることから分かるように、最初から入っています。ただ、バージョンは古いので新しいものに置き換えることをおすすめします。

なので、「Font Awesome」の導入方法と使い方の記事を先に書きました。
一行追加するだけ！CSSのみで使えるフォントアイコン【Font Awesome】の使い方とサンプル

是非使えるようになっておきましょう。

吹き出し・バルーン

サクッと流してしまうと、何やってるのか分からないと思うので、どういう仕組みになっているのか詳細を書くと長くなるので、こちらも別の記事に書きました。
CSSだけで吹き出し・バルーンを作る方法（SNS連携ボタンのアレ）

見出しの作り方

一応先にあげた2つがややこしい部分なので、それ以外は大したことはありません。

comments.phpの、前回用意した「コメント入力フォームの表示切替えボタン」の上に追加します。

<div id="comments-header">
    <h3 class="comment-label"><i class="fa fa-comments-o"></i>&nbsp;   コメント</h3>
    <div class="comment-count"><?php echo get_comments_number(); ?></div>
    <div class="clear"></div>
</div>

style.cssの最後にでも追加。別ファイルに分けても良い。

/* コメントグループのヘッダ */
#comments-header {
    border-bottom: 1px #f3f3f3 dotted;
    padding:10px;
}
#comments-header .comment-label {
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}
#comments-header .comment-count {
    float:left;
    position: relative;
    font-size: 12px;
    font-weight: normal; 
    border: 1px solid #999;
    border-radius: 2px;
    padding: 2px 5px;
    margin-left: 10px;
    margin-bottom: 5px;
}
#comments-header .comment-count:before {
    content: '';
    position: absolute;
    border-right: 4px solid #999;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    top: 50%;
    left: -4px;
    margin-top: -4px;
}
#comments-header .comment-count:after {
    content: '';
    position: absolute;
    border-right: 3px solid #fff;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    top: 50%;
    left: -3px;
    margin-top: -3px;
}

 

<h3>の見出しと、コメント数を表示する<div>は「float:left」で回り込みをかけて横に並べました。<div class=”clear“>の内容は「clear: both」で回り込みを解除する為のものです。

コメント数は「get_comments_number()」で取得できます。

見出しの中の<i>は「Font Awesome」のアイコンを表示する為のもので、「comments-o」のアイコンを使っています。

本来<h3>に適用されるスタイルを打ち消して、親の#comments-headerに似たようなスタイルを適用して完成です( ･`д･´)

終わりに

( ﾟдﾟ)ﾊｯ!書き終わった時には夜が明けていた！

…。

まだ8時だし、⊂（＾ω＾）⊃　ｾﾌｾﾌ!!

ようやくコメントフォームカスタマイズ第１弾の解説が完結しました。
（第２弾あるのか分からんけど）

デザインセンスは残念なのであれですが、コメント欄場所とるなーと思ってる人多そうだし、気に入ってくれたらコピペして使ってやって下さい。

おかげで、だいぶスッキリしました。

それではまた！

 - CSS, STINGER, Webサイト構築, WordPress