LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@woonotch(woonotch)

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

Last updated at Posted at 2022-10-22

子テーマ作成
カスタムページテンプレート作成
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作成

# vim /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作成

# vim /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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?