2015.11.16WordPressツイート8シェアはてブ10送るPocket7ものすごく理解に苦しむタイトルですが、訪れて頂いてありがとうございます。ウィジェットのCSSをカスタマイズしている際に、既存のマークアップだとちょっとCSSでデザインしずらいなと思うことがあります。代表的なところとして、カテゴリーウィジェットで投稿数を表示させた時なんかは、投稿数がリンクタグの外にでているので、横幅いっぱいにリンクタグを広げることができません。そんな時は既存ウィジェットのHTMLを修正してしまいましょう。カテゴリーウィジェットの「投稿数」をリンクタグ内にいれるカテゴリーウィジェットで(12)みたいな投稿数を表示させたいことがあると思います。普通に表示させるだけなら、カテゴリーウィジェットの設定から「投稿数を表示する」にチェックを入れるだけでいいんですが、カスタマイズでリンクを横幅いっぱいにしている場合に不具合が出てきます。デフォルトではリンクタグの外に投稿数のテキストが表示される上に、spanなどで囲まれてもいないので編集のしようがありません。そんな時は下記をfunctions.phpなどに書き込めば、リンクタグの中に投稿数を表示できるようになります。$output;}マークアップ的にはどうなの?という意見もあるかもしれませんが、UI重視で考えた時自分はこの方がいいと思っています。これでスタイリングがしやすくなりますね!ちなみにアーカイブウィジェットで「2015年8月」みたいなやつの投稿数もリンクタグ内に入れたい場合はこちらのコードをつかってください。$output;}最新記事の「日付」をリンクタグ内にいれるこちらもカテゴリーの投稿数をリンクタグ内に入れると同じ考え方で、日付もリンクタグ内にいれてしまうことができます。ここでリンクタグ内に日付を入れるために、「ウィジェットの最新の投稿をテーマ側で書き換えるサンプルコード」を紹介しようと思ったんですが、アイキャッチ画像も表示させたいって方多いですよね?というわけで...ついでにアイキャッチ画像も表示するどうせなら一気にやってしまいましょう。アイキャッチ画像を表示させつつ、画像/日付やり方は簡単で、先ほどの出力部分にアイキャッチを呼び出す関数を書くだけです。アイキャッチ画像が無かった場合のNOIMAGEも条件分岐で設定することができます。下記がサンプルコード。'my_recent_widget_registration');これで最新記事のウィジェットでアイキャッチ画像を使うことができます。この方法だと最新記事ウィジェットを書き換えてしまうことになるので、デフォルトのようなタイトルだけの表示ができなくなってしまいますので、その点ご注意ください。まとめ今回はウィジェットのカスタマイズについてでした。この他にもいろいろとカスタマイズする方法はありますので、よく使われそうなものがあれば追記していきたいと思います。テーマファイルを変更することになりますので、バックアップをとって自己責任にてよろしくお願いいたします。SPONSORLINKWordPressカスタマイズこの記事をシェアツイート8シェアはてブ10送るPocket7FOLLOWFeedly新作!シンプルかつパワフルWPテーマ「スワロー」SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。US矢野ヨシキ香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。WebSiteTwitterFacebookGoogle+HOMEWordPress【Widget】投稿数をリンクタグの中にいれたり最新の投稿にアイキャッチを追加WPテーマ「スワロー」シンプル。このサイトで使っているWordPressテーマ、SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。