カスタムポストの新着表示や、かゆい所に手が届く設定が出来て便利な「Flexible Posts Widget」ですが、OutPutされるHTMLを変えたたかったので、少しカスタマイズました。

やり方は意外に簡単だったので、備忘録的にブログに記録しておきます。

方法は、WordPressプラグインの「Flexible Posts Widget」のインストール(installation)のタブのところに掲載されています。

https://ja.wordpress.org/plugins/flexible-posts-widget/installation/

To use a custom HTML output template

  1. 1. Create a folder called flexible-posts-widget in the root folder of the currently active theme.
  2. 2. Copy widget.php from within the plugin’s views folder into your theme’s new flexible-posts-widget folder.
  3. 3. Rename your theme’s widget.php template file to a name of your choice. Example: my-template.php.
  4. 4. Go to ‘Appearance’ > ‘Widgets’ in WordPress to configure an instance of the widget.
  5. 5. In the ‘Template Filename’ field choose the name of the template file you added to your theme. Example: My Template

こちらをなんとなく意訳すると……

  1. 1. 現在アクティブになっているテーマのフォルダ(テーマのルートフォルダ)に「flexible-posts-widget(ハイフンはそのまま)」というフォルダを作成。
  2. 2. プラグインのフォルダの中にあるviewsフォルダ内の widget.php を、先ほど作成した「flexible-posts-widget」にコピーします。
  3. 3. widget.php の名前を、例えば my-template.php のように変更します。
  4. 4. 外観 > ウィジェット > Flexible Posts Widget で確認します
  5. 5. Flexible Posts Widget の設定(下の方にあります)で、 My Templateのように、先ほどリネームしたテンプレートを選びます。
    スクリーンショット(2016-07-01 16.23.59)

これだけだと分かりづらいので、少し解説すると、元々のマークアップはこんな風になっています。

<a>タグの中にイメージとタイトルが入っていて、CSSが変え辛かったので、画像とタイトル部分を別々に<a>タグに入れることにしました。

とこんな感じです。

また、例えばカスタムポストだけを表示している、特定のカテゴリを表示している時に、そのカテゴリの一覧が見られるようにこんな感じでリンクをつけたかったので

</ul>の下に

を追加しています。

teamはarrayに入ってくるので、本当はforeachで回す方が良いのですが、私の環境では、複数のカテゴリを表示することがないので、上記の方法で問題ありません。

他にもっと良い方法があると思いますが、私の環境ではとりあえずこれで満足してます。Flexible Posts Widgetは非常に使いやすいので、ぜひ使ってみて下さい。

保存

保存

保存