WP投稿記事一覧をSwiperでスライダーさせる

[子テーマ作成](#子テーマ作成)
[カスタムページテンプレート作成](#カスタムページテンプレート作成)
[swiperインストール](#swiperインストール)
[swiperセッティング](#swiperセッティング)
[デフォルト投稿一覧取得](#デフォルト投稿一覧取得)
[カスタム投稿一覧取得](#カスタム投稿一覧取得)
[投稿一覧をSwiperに組み込む](#投稿一覧をswiperに組み込む)
[参考記事](#参考記事)

# 基本環境
WordPress 6.0.3
Theme Twentytwenty
Swiper 8.4.4

# 子テーマ作成

### 子テーマディレクトリ作成

```
# mkdir /var/www/html/example.com/wp/wp-content/themes/example-child
```
### style.css作成

```:#&nbsp;vim&nbsp;/var/www/html/example.com/wp/wp-content/themes/example-child/style.css
/*
 Theme Name:   example-child
 Theme URI:    http://example.com/example-child/
 Description:  example-child Theme
 Author:       hoge
 Author URI:   http://example.com
 Template:     ＜親テーマ名＞
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  example-child
*/
```

### functions.php作成

```:#&nbsp;vim&nbsp;/var/www/html/example.com/wp/wp-content/themes/example-child/functions.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>
```

### 子テーマ有効化

WordPressダッシュボード　＞　外観　＞　テーマ
`example-child`というテーマがあれば`有効化`

# カスタムページテンプレート作成

template-full-width.phpベースで子テーマ内にexample-page.phpを作成

```:example.com/wp-content.themes/テーマ名/example-page.php
<?php
/*
 * Template Name: example-page（テンプレート名）
 * Template Post Type: post, page
 */

get_template_part( 'singular' );
```

`get_template_part( 'singular' );`部分を`singular.php`に置き換え

```:example.com/wp-content.themes/テーマ名/example-page.php
<?php
/*
 * Template Name: example-page（テンプレート名）
 * Template Post Type: post, page
 */

get_header();
?>

<main id="site-content">

	<?php
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post();
			get_template_part( 'template-parts/content', get_post_type() );
		}
	}
	?>

</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>
```

`<?php
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post();
			get_template_part( 'template-parts/content', get_post_type() );
		}
	}
	?>`
部分を`template-parts/content.php`に置き換え

```:example.com/wp-content.themes/テーマ名/example-page.php
<?php
/*
 * Template Name: example-page（テンプレート名）
 * Template Post Type: post, page
 */

get_header();
?>

<main id="site-content">

	<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
	<?php
	get_template_part( 'template-parts/entry-header' );
	if ( ! is_search() ) {
		get_template_part( 'template-parts/featured-image' );
	}
	?>
	<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
		<div class="entry-content">
			<?php
			if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
				the_excerpt();
			} else {
				the_content( __( 'Continue reading', 'twentytwenty' ) );
			}
			?>
		</div><!-- .entry-content -->
	</div><!-- .post-inner -->
	<div class="section-inner">
		<?php
		wp_link_pages(
			array(
				'before'      => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>',
				'after'       => '</nav>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			)
		);
		edit_post_link();
		// Single bottom post meta.
		twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' );
		if ( post_type_supports( get_post_type( get_the_ID() ), 'author' ) && is_single() ) {
			get_template_part( 'template-parts/entry-author-bio' );
		}
		?>
	</div><!-- .section-inner -->
	<?php
	if ( is_single() ) {
		get_template_part( 'template-parts/navigation' );
	}
	/*
	 * Output comments wrapper if it's a post, or if comments are open,
	 * or if there's a comment number – and check for password.
	 */
	if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) {
		?>
		<div class="comments-wrapper section-inner">
			<?php comments_template(); ?>
		</div><!-- .comments-wrapper -->
		<?php
	}
	?>
</article><!-- .post -->


</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>
```

### カスタムテンプレートを有効化

WordPress管理画面の各固定ページまたは投稿ページ設定＞テンプレートから`example-page`を選択し「公開」
フロントでテンプレートが反映されない場合、「下書き」→「公開」すると反映される




# Swiperインストール
[CDN]あるいは[ダウンロード]でインストール＆セッティング

### CDNでインストール
子テーマ内に以下の名前で空ファイルを作成

```:example.com/wp-content.themes/テーマ名/swiper-setting.js

```


`Swiperjs.com` 
https://swiperjs.com/get-started#download-assets

`<link rel="stylesheet" href="https://cdn.jsdelivr.net/・・・>`をコピペ

```:example.com/wp-content.themes/テーマ名/header.php
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/・・・>
</head>
```

`<script src="https://cdn.jsdelivr.net/・・・>`をコピペ
`<script src="root/swiper-setting.js”>`を記述

```:example.com/wp-content.themes/テーマ名/footer.php
<body>
・・・
<script src="https://cdn.jsdelivr.net/・・・>
<script src="https://example.com/wp-content.themes/テーマ名/swiper-setting.js”>
</body>
```

### ダウンロードでインストール

子テーマ内に以下の名前で空ファイルを作成

```:example.com/wp-content.themes/テーマ名/swiper-setting.js

```

`JSDELIVR.com`
https://www.jsdelivr.com/package/npm/swiper
swiper-bundle.min.css
swiper-bundle.min.js
２ファイルを開きコードをコピー、子テーマ内に同名ファイルをアップロード

```:example.com/wp-content.themes/テーマ名/header.php
<head>
<link rel="stylesheet" href="https://example.com/wp-content.themes/テーマ名/swiper-bundle.min.css>
</head>
```

```:example.com/wp-content.themes/テーマ名/footer.php
<body>
・・・
<script src="https://example.com/wp-content.themes/テーマ名/swiper-bundle.min.js>
<script src="https://example.com/wp-content.themes/テーマ名/swiper-setting.js”>
</body>
```

### Swiper設置
Swiperを設置したいカスタムテンプレートphpにHTML記述（基本形）

```:example.com/wp-content.themes/テーマ名/example-page.php
<div class="[swiper囲みクラス名]">
    <div class="swiper [swiper設定クラス名]">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="[画像URL1]" alt="" width="100%" >
            </div>
            <div class="swiper-slide">
                <img src="[画像URL2]" alt="" width="100%" >
            </div>
            <div class="swiper-slide">
                <img src="[画像URL3]" alt="" width="100%" >
            </div>
　　　　　　　　　　　　　　　　　　　　　　　　<div class="swiper-button-prev"></div>
		　　　　　　　　<div class="swiper-button-next"></div>
			<div class="swiper-pagination"></div>
        </div>
    </div>
</div>

```

# Swiperセッティング
`swiper-setting.js`に設定を記述
HTML記述および`swiper-setting.js`記述の[swiper設定クラス名]を変えることで複数のSwiperを設定できる

```:example.com/wp-content.themes/テーマ名/swiper-setting.js
const swiper = new Swiper(".[swiper設定クラス名]",{
    loop: true, //無限ループ
    slidesPerView:1, //画面に表示する画像の数
    centeredSlides: true, //アクティブな画像を中央配置
    
    autoplay:{
        delay: 5000,
    }, //自動スライダー、スライドする間隔をミリ秒で設定
    grabCursor: true, //カーソルを手で掴むデザインにする
    speed:2000, //切り替え速度をミリ秒で設定
    effect: 'fade', //切り替えアニメーション
    fadeEffect: {
        crossFade: true,
    }, //フェード設定時のオーバーラップ
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type: 'bullets',
      }, //全体構成を示すナビゲーション、クリックで反応、マークの形
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }, //画像をスライドさせる矢印マーク
    breakpoints: {
        1000: {
            slidesPerView:3.2,
        }
    } //ページ幅でレスポンシブさせる
});
```

設定一覧
https://choppydays.com/swiper-js-%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E4%B8%80%E8%A6%A7/
https://coder-memo.com/swiper-option/




# デフォルト投稿一覧取得

### WordPressタグ設定カスタマイズ
投稿ページでタグをチェックボックスで設定できるカスタマイズ

```:example.com/wp-content.themes/テーマ名/functions.php
//投稿のタグをチェックボックスで選択できるようにする
function change_post_tag_to_checkbox() {
  $args = get_taxonomy('post_tag');
  $args -> hierarchical = true;//Gutenberg用
  $args -> meta_box_cb = 'post_categories_meta_box';//Classicエディタ用
  register_taxonomy( 'post_tag', 'post', $args);
}
add_action( 'init', 'change_post_tag_to_checkbox', 1 );
```

### デフォルト投稿記事を作成
WordPress管理画面から、
投稿カテゴリー作成[スラッグ：category01]
投稿タグ作成[スラッグ：tag01]
投稿記事作成[カテゴリースラッグ：category01、タグスラッグ：tag01]

### デフォルト投稿一覧取得

```:example.com/wp-content.themes/テーマ名/example-page.php
<?php
    $args = array(
        'posts_per_page'   => -1, //一覧に表示する記事数（-1は全記事表示）
        'category'         => 10, //取得するカテゴリーID
        'orderby'          => 'ID', //ソート基準値
        'order'            => 'DESC', //降順ソート
    );

    // 配列で指定した内容で、記事情報を取得
    $datas = get_posts( $args );

    // 取得した記事情報の表示
    if ( $datas ): // 記事情報がある場合はforeachで記事情報を表示

    // ↓ ループ開始 ↓
    foreach ( $datas as $post ): // $datas as $post の $datas は取得時に設定した変数名、$postは変更不可
        setup_postdata( $post ); // アーカイブページ同様にthe_titleなどで記事情報を表示できるようにする
?>
<div class="">
    <a href="<?php the_permalink(); /* 記事URL */ ?>" target="_blank" title=""><?php the_post_thumbnail(); /* サムネイルURL */ ?></a> //リンク付き記事サムネイル
    <a href="<?php the_permalink(); /* 記事URL */ ?>" target="_blank" title=""><?php the_title(); /* 記事タイトル */ ?></a> //リンク付き記事タイトル
</div>
<?php
    endforeach; 
    // ↑ ループ終了 ↑
    else: // 記事情報がなかったら
?>
    〜　記事掲載までお待ちください 〜
<?php
    endif;
    // 一覧情報取得に利用したループをリセットする
    wp_reset_postdata();
?>
```


### カスタム投稿一覧取得

```:example.com/wp-content.themes/テーマ名/example-page.php

    <?php
        $args = array(
            'post_type' => 'information',  //カスタム投稿タイプ名
            'posts_per_page' => 10, // 表示件数
            'paged' => $paged,
            );
        // 配列で指定した内容で、記事情報を取得
        $myposts = new WP_Query($args);
        // 取得した記事情報の表示
        if($myposts->have_posts()):// 記事情報がある場合はforeachで記事情報を表示
        // ↓ ループ開始 ↓
        while ($myposts->have_posts()): // $datas as $post の $datas は取得時に設定した変数名、$postは変更不可
            $myposts->the_post(); // アーカイブページ同様にthe_titleなどで記事情報を表示できるようにする
    ?>
<div class="">
    <div class="<?php $tag = get_the_tags(); echo $tag[0]->slug; ?>"> //タグスラッグごとのCSS用クラス名
        <a href="<?php the_permalink(); /* 記事URL */ ?>" title="<?php the_title(); /* 記事タイトル */ ?>"> //リンク付き記事タイトル
            <<?php $tag = get_the_tags(); echo $tag[0]->name; ?>> //タグ名
            <?php $tag = get_the_tags(); echo $tag[0]->slug; ?> //タグスラッグ名
            <?php the_time('[Y-n-j]'); /* 投稿日付 */ ?> //投稿日付
            <?php the_title(); /* 記事タイトル */ ?> //記事タイトル
        </a>
    </div>
    <?php
        endwhile; 
        // ↑ ループ終了 ↑
        else: // 記事情報がなかったら
    ?>
        〜　記事掲載までお待ちください 〜
    <?php
        endif;
        // 一覧情報取得に利用したループをリセットする
        wp_reset_postdata();
    ?>
    </div>
```


# 投稿一覧をSwiperに組み込む

### デフォルト投稿を組み込む

```:example.com/wp-content.themes/テーマ名/example-page.php
<div class="swiper-dome">
    <div class="swiper slider00">
        <div class="swiper-wrapper">
            <?php
                $args = array(
                    'posts_per_page'   => -1,
                    'category'         => 10,
                    'orderby'          => 'ID',
                    'order'            => 'DESC',
                );

                // 配列で指定した内容で、記事情報を取得
                $datas = get_posts( $args );

                // 取得した記事情報の表示
                if ( $datas ): // 記事情報がある場合はforeachで記事情報を表示

                // ↓ ループ開始 ↓
                foreach ( $datas as $post ): // $datas as $post の $datas は取得時に設定した変数名、$postは変更不可
                    setup_postdata( $post ); // アーカイブページ同様にthe_titleなどで記事情報を表示できるようにする
            ?>
            <div class="swiper-slide">
                <a href="<?php the_permalink(); /* 記事URL */ ?>" target="_blank" title=""><?php the_post_thumbnail(); /* サムネイルURL */ ?></a>
                <a href="<?php the_permalink(); /* 記事URL */ ?>" target="_blank" title=""><?php the_title(); /* 記事タイトル */ ?></a>
            </div>
            <?php
                endforeach; 
                // ↑ ループ終了 ↑
                else: // 記事情報がなかったら
            ?>
                〜　記事掲載までお待ちください 〜
            <?php
                endif;
                // 一覧情報取得に利用したループをリセットする
                wp_reset_postdata();
            ?>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
    </div>
</div>
```


### カスタム投稿を組み込む


```:example.com/wp-content.themes/テーマ名/example-page.php
<div class="swiper-dome">
    <div class="swiper slider00">
        <div class="swiper-wrapper">
            <?php
                $args = array(
                    'post_type' => 'information',  //カスタム投稿タイプ名
                    'posts_per_page' => 10, // 表示件数
                    'paged' => $paged,
                    );
                // 配列で指定した内容で、記事情報を取得
                $myposts = new WP_Query($args);
                // 取得した記事情報の表示
                if($myposts->have_posts()):// 記事情報がある場合はforeachで記事情報を表示
                // ↓ ループ開始 ↓
                while ($myposts->have_posts()): // $datas as $post の $datas は取得時に設定した変数名、$postは変更不可
                    $myposts->the_post(); // アーカイブページ同様にthe_titleなどで記事情報を表示できるようにする
            ?>
            <div class="swiper-slide">
                <a href="<?php the_permalink(); /* 記事URL */ ?>" title="<?php the_title(); /* 記事タイトル */ ?>">
                    <img src="<?php the_post_thumbnail_url(); ?>">
                </a>
                <a href="<?php the_permalink(); /* 記事URL */ ?>" title="<?php the_title(); /* 記事タイトル */ ?>">
                    <?php the_title(); /* 記事タイトル */ ?>
                </a>
            </div>
            <?php
                endforeach; 
                // ↑ ループ終了 ↑
                else: // 記事情報がなかったら
            ?>
                〜　記事掲載までお待ちください 〜
            <?php
                endif;
                // 一覧情報取得に利用したループをリセットする
                wp_reset_postdata();
            ?>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
    </div>
</div>
```
***
# 参考記事
https://www.webcreatorbox.com/tech/wordpress-child-theme
https://b-risk.jp/blog/2022/04/swiper/
https://swiperjs.com/get-started#download-assets
https://choppydays.com/swiper-js-%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E4%B8%80%E8%A6%A7/
https://coder-memo.com/swiper-option/
https://wpdocs.osdn.jp/wiki/index.php?title=%E6%8A%95%E7%A8%BF%E3%82%BF%E3%82%A4%E3%83%97&redirect=no