今回はワードプレスのコメント欄をカスタマイズしました。

コメント欄の設置方法は、前回の記事「ブログにコメント欄を追加しました」を見てくさい。

さてと、

ｐｈｐはまだまだ初心者ですが、ｈｔｍｌは割りと得意にしてる私です。

デフォルト状態をブラウザの「ページのソース」で表示させ、

どうな感じにコメント欄が生成させたか、取りあえずタグを理解すぅ。

でぇ、イジリたいタグをテーマフォルダ内の「style.css」に書き出し、

こうカスタマイズした。　参考まで

 /*コメント欄のカスタマイズ*/
h3#comments { font-size: 11px;
margin-bottom:20px;
margin-top:30px; }
#comments .navigation {
padding: 0 0 18px 0;
}
.commentlist li.comment {
line-height: 24px;
margin: 0 16px 30px -20px;
padding: 10px 0 0 70px;
background-image:url(images/abt.png);
background-repeat:no-repeat;
background-position:10px 10px;
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
background-color:#FFFFFF;
list-style: none;
font-size:12px;
}
.comment-author {
float:left;
margin-right:30px;
}
.comment-author cite {
color: #000;
font-style: normal;
font-weight: bold;
}
.comment-meta a:link,
.comment-meta a:visited {
color: #888;
}
.reply {
font-size: 12px;
padding: 0 0 10px 0;
}

実際にコメントされるとこんな感じに表示される。

アバターはフリー素材で拾ってきたものですが

↓必要であればコピペして使ってくさい。

　abt.png　　50×50ピクセル

序にコメントフォームも少しいじりました。

これまた参考まで

/* Comments form */
input[type="submit"] {
color: #333;
}
#respond {
line-height: 24px;
margin: 40px 16px 40px 20px;
padding: 18px;
box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.3);
background-color:#FFFFFF;<br /> }
#respond p {
margin: 0;
}
#respond label {
color: #888;
font-size: 12px;
}
#respond input {
margin: 0 0 12px;
width: 260px;<
}
#respond textarea {
width: 98%;
margin-bottom:12px;
}

こんな感じ

自作テーマなので、仕様の違い？で表示も若干異なるかもしれません。

また、今回確認はＷｉｎＸＰにてブラウザはＦｉｒｅｆｏｘを使用しています。

一部CSS3も使っているのでＩＥ8以下は対応していません。

しまい

サイドバー等に設置する検索フォーム（検索ボックス）をカスタマイズしました。

ワードプレスの検索フォームをカスタムしたい方の為に

分かりやすくレクチャーしますね。

当方は設置する場所をヘッダー内にしましたが、ウェジェットでサイドバーに

表示させたい場合は、これからの作業は必要ありません。

・ヘッダー内に検索フォームを表示させるには

テーマフォルダー内の「header.php」を開き、表示させたいところに

<?php get_search_form(); ?>　

を記述します。ただそれだけです。そうするとデフォルトのボックスが現れます。

表示位置はdiv等で囲み、その指定は「style.css」に書き込みましょう。

当方仕様は右側に検索ボックスを表示でこうです。

style.css　には

#info { float:right;
 line-height:33px;
 margin-right:24px;
 }

header.php には

<h2>HCZ BLOG</h2>
<div id="info"><?php get_search_form(); ?></div>

と記述しました。

これからが本題です。

・検索フォームをカスタム

いじるファイルは2つ。

style.css：テーマのフォルダー内に格納されている。

general-template.php：wp_includesフォルダー内に格納。

style.css　に追記する内容

#searchform label {display:none}
#s{/* 検索文字列入力欄 */
 width:160px;
 height:14px;
 }
 #searchsubmit{/* 検索ボタン */
 position: relative;
 top: 6px;
 left: -26px;
 height:20px;
 }

解説：「#searchform label {display:none}」は、「検索:」文字を表示させない指定。#searchsubmit{/* 検索ボタン */　のposition: relative;　は、検索文字列入力欄の上にボタンを表示させる指定。ボタン表示位置はtop・leftで好み位置に調整してください。

general-template.php　１６2行目の内容を変更

変更前

<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
 <input type="text" value="' . get_search_query() . '" name="s" id="s" /><
 <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
 </div>

変更後

<div><label for="s">' . __('Search for:') . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="Search" />
<input type="image" src="https://www.hcz.jp/blog/wp-includes/images/btn.gif" id="searchsubmit" value="Search" />
 </div>

解説：「placeholder=”Search”」は、検索文字列入力欄に「Search」と表示させる。「input type=”image”」は検索ボタンを画像（虫眼鏡）に置き換える指定で、「src=”https://www.hcz.jp/blog/wp-includes/images/btn.gif“」は画像がある場所。画像はどこのフォルダーにおいても大丈夫だが、相対パスでの記述だと表示されないことがあるので、念のために絶対パスで記述するべし。

数ヵ月後エラーがでてしまった・・・に、つづく

ワードプレス（WordPress）既存のカレンダー（投稿のカレンダー）は、

ショボかったので、手を加えました。

カスタマイズに関して弄ったところは、

テーマフォルダ内のスタイルシート「style.css」に、下記を追加。

/*カレンダーのカスタマイズ*/
 #wp-calendar {
 empty-cells: show;
 width:190px;
 margin: 10px auto 0;
 border-collapse: collapse;
 }
#wp-calendar caption {
 background:#CCCCCC;
 border: 1px solid #808080;
 border-bottom:0;
 }
#wp-calendar th,#wp-calendar td {
 padding: 2px 2px;
 text-align: center;
 border: 1px solid #808080;
 }
#wp-calendar th { font-size:10px;}
#wp-calendar tfoot td { border: none;}
 
※英語表記するにはプラグインをインストールする。
プラグイン：EnglishDate
あっ！！アーカイブ内も英語表記されるので要注意。
しまい
休日と今日に色を付けたカレンダー（ウェジェット）WordPress