カスタムポストの新着表示や、かゆい所に手が届く設定が出来て便利な「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）

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

    <ul class="dpe-flexible-posts">
    <?php while( $flexible_posts->have_posts() ) : $flexible_posts->the_post(); global $post; ?>
        <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <a href="<?php echo the_permalink(); ?>">
                <?php
                    if( $thumbnail == true ) {
                        // If the post has a feature image, show it
                        if( has_post_thumbnail() ) {
                            the_post_thumbnail( $thumbsize );
                        // Else if the post has a mime type that starts with "image/" then show the image directly.
                        } elseif( 'image/' == substr( $post->post_mime_type, 0, 6 ) ) {
                            echo wp_get_attachment_image( $post->ID, $thumbsize );
                        }
                    }
                ?>
                <h4 class="title"><?php the_title(); ?></h4>
            </a>
        </li>
    <?php endwhile; ?>
    </ul><!-- .dpe-flexible-posts -->

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

    <ul class="dpe-flexible-posts">
    <?php while( $flexible_posts->have_posts() ) : $flexible_posts->the_post(); global $post; ?>
        <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <a href="<?php echo the_permalink(); ?>">
                <?php
                    if( $thumbnail == true ) {
                        // If the post has a feature image, show it
                        if( has_post_thumbnail() ) {
                            the_post_thumbnail( $thumbsize );
                        // Else if the post has a mime type that starts with "image/" then show the image directly.
                        } elseif( 'image/' == substr( $post->post_mime_type, 0, 6 ) ) {
                            echo wp_get_attachment_image( $post->ID, $thumbsize );
                        }
                    }
                ?>
            </a> // ここに<a>を追加
            <a href="<?php echo the_permalink(); ?>"> // ここに<a href="<?php echo the_permalink(); ?>">を追加
            <h4 class="title"><?php the_title(); ?></h4>
            </a>
        </li>
    <?php endwhile; ?>
    </ul><!-- .dpe-flexible-posts -->

とこんな感じです。

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

</ul>の下に

<?php
$cat = get_term( $term[0] );
$slug = $cat->slug;
?>
<a class="txt_right" href="http://www.com-tree.com/category/<?php echo $slug; ?>"><?php echo $title; ?>をさらに見る</a>

を追加しています。

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

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

保存

保存

保存