【WordPress】サイドバーに、投稿記事にある画像の一覧を表示する。
こんにちは、大野です。
コピペで簡単Wordpressカスタマイズ！
これをシリーズ化しようと思いまして
今回は、その第一弾で、サイドバーに、投稿記事にある画像の一覧を表示してみようと思います。
まず対象者ですが、ホームページのコーディングがある程度できるかたで、PHP初心者の方です。
今回に関しては、PHPなんて全くわからないって方でも大丈夫です。
※Wordpressのバージョンは、4.9.4でやっております。
仕様としては以下のように考えています。
最新記事から９件を取得し、記事の最初に現れる画像と記事のURLを取得しサイドバーに一覧として表示します。
※画像は、メディアに入っているもののみ取得します。他サイトにリンクしている画像は取得しません。
うまくいけば以下の赤枠にあるような表示になります。
それでは、いってみましょう♪
まずは、テーマフォルダにあるfunctions.phpを開きます。
functions.phpは、ftpで取得するか、wordpress管理画面の左メニューから
「外観」→「テーマの編集」を開き、テーマファイルから「functions.php」を選択します。
※ここでは、子テーマとか細かい話は抜きでいきます。
そして以下のコードをfunctions.phpの一番下に貼り付けてください。
ここがコピペで簡単なところです（笑
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
class Photo_Widget extends WP_Widget { function Photo_Widget() { parent::WP_Widget( false, $name = 'Photo', array( 'description' => '投稿画像を表示します。', ) ); } function widget($args, $instance) { $path = get_stylesheet_directory_uri(); echo <<<PHOTO <aside class="widget widget_photo"> <h3 class="widget-title"><img src="{$path}/img/side-photo.png" alt="Photo"></h3> <ul> PHOTO; $posts = get_posts( array( 'posts_per_page' => 9 ) ); foreach ( $posts as $post ) { the_post(); $img = $this->_get_img( get_the_content() ); if( !empty( $img ) ) { echo '<li><a href="' . get_permalink() . '"><img src="' . $img[0] . '" alt=""></a></li>'; } } echo '</ul></aside>'; wp_reset_postdata(); } function _get_img( $content ) { global $wpdb; $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches); if( isset( $matches[1] ) ) { foreach( $matches[1] as $post_name ) { $sql = "SELECT ID FROM {$wpdb->posts} WHERE guid = %s"; $attachment_id = ( int )$wpdb->get_var( $wpdb->prepare( $sql, $post_name ) ); if( !empty( $attachment_id ) ) { return wp_get_attachment_image_src( $attachment_id , 'thumbnail' ); } } } return false; } } register_widget('Photo_Widget'); |
貼り付け終わったら、functions.phpを保存します。
そして、wordpress管理画面の左メニューから、「外観」→「ウィジェット」を開きます。
上図のように利用できるウィジェットに「Photo」が追加されています。
これで「追加」をクリックして、サイドバーにPhotoウィジェットを追加してください。
これで記事のサイドバーには、以下のようなコードが出力されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<aside class="widget widget_photo"> <h3 class="widget-title"><img alt="Photo" src="https://xxxxxx.com/wp-content/themes/machida/img/side-photo.png"></h3> <ul> <li><a href="https://xxxxxx.com/?p=2464"><img alt="" src="https://xxxxxx.com/wp-content/uploads/aaa.jpg"></a></li> <li><a href="https://xxxxxx.com/?p=2460"><img alt="" src="https://xxxxxx.com/wp-content/uploads/bbb.jpg"></a></li> <li><a href="https://xxxxxx.com/?p=2456"><img alt="" src="https://xxxxxx.com/wp-content/uploads/ccc.jpg"></a></li> <li><a href="https://xxxxxx.com/?p=2451"><img alt="" src="https://xxxxxx.com/wp-content/uploads/ddd.jpg"></a></li> <li><a href="https://xxxxxx.com/?p=2446"><img alt="" src="https://xxxxxx.com/wp-content/uploads/eee.jpg"></a></li> <li><a href="https://xxxxxx.com/?p=2443"><img alt="" src="https://xxxxxx.com/wp-content/uploads/fff.jpg"></a></li> <li><a href="https://xxxxxx.com/?p=2439"><img alt="" src="https://xxxxxx.com/wp-content/uploads/ggg.jpg"></a></li> <li><a href="https://xxxxxx.com/?p=2431"><img alt="" src="https://xxxxxx.com/wp-content/uploads/ggg.jpg"></a></li> <li><a href="https://xxxxxx.com/?p=2429"><img alt="" src="https://xxxxxx.com/wp-content/uploads/ggg.jpg"></a></li> </ul> </aside> |
スタイルを整えれば完成です！
いかがでしたでしょうか？うまくできましたでしょうか。
次は、いつになるかわかりませんが、第二弾やりたいと思います。
それでは、また。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ホームページ、ちらし、看板などお店をPRしたいならアミテスへお問い合わせください！
wordpress案件もお任せください！