ogiori.com

CSSファイルとJSファイルを読み込む。

👍

: functions.php

function my_script_init()
{
wp_enqueue_style( 'my-css', get_template_directory_uri() . '/library/css/styles.css', array(), '1.0.0', 'all' );
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/library/js/script.js', array(), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'my_script_init');

任意のCSSファイルとJSファイルを読み込みます。

シングルページ用ページネーション。

👍

: single.php

<?php previous_post_link('%link', '< 前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ >'); ?>

シングルページ用のページネーションです。

アーカイブ用ページネーション

👍

: archive.php

 <?php
    global $wp_query;
    $paginate_args = array(
        'base'               => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
        'format'             => '?paged=%#%',
        'current'            => max( 1, get_query_var( 'paged' ) ),
        'total'              => $wp_query->max_num_pages,
        'before_page_number' => '<span class="screen-reader-text">' . __( 'Page', 'mytextdomain' ) . ' </span>',
        'prev_text'          => __( '前のページ', 'mytextdomain' ),
        'next_text'          => __( '次のページ', 'mytextdomain' ),
    );
    echo paginate_links( $paginate_args );
    ?>

アーカイブ用ページネーションを出力します。ループ後にこのコード記述してください。【オプション説明】 base > ページネーションのベースURL formatm > ページ番号のURLフォーマット current > 現在のページ番号t otal > 総ページ数 before_page_number > ページ番号の前に挿入するHTML（アクセシビリティ用） prev_text > 前のページへのリンクテキスト next_text > 次のページへのリンクテキスト

ACFで設定した、画像を表示します。(返り値IDバージョン)

👍

: finctions.php

// functions.phpに記述
<?php
function awesome_acf_responsive_image( $image_id, $image_size, $max_width ) {
    if ( empty( $image_id ) ) {
        return;
    }
    $image_src    = wp_get_attachment_image_url( $image_id, $image_size );
    $image_srcset = wp_get_attachment_image_srcset( $image_id, $image_size );
    $image_alt    = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
    printf(
        'src="%s" srcset="%s" sizes="(max-width: %s) 100vw, %s" alt="%s"',
        esc_url( $image_src ),
        esc_attr( $image_srcset ),
        esc_attr( $max_width ),
        esc_attr( $max_width ),
        esc_attr( $image_alt )
    );
}
?>

// テンプレートファイル内での使い方
<?php
$image_id = get_field('your_image_field'); // ACFで画像IDを返す設定にする
?>
<img <?php awesome_acf_responsive_image($image_id, 'full', '800px'); ?>>

ACFの画像フィールドは「返り値」を「画像ID」に設定しておく必要があります。この関数は <img> タグ全体ではなく属性部分のみを出力するため、必ず <img> タグの中で使用してください。 $max_width には '800px' のように単位を含めた文字列で渡す必要があります。

ACFで設定した、画像を表示します。

👍

: all

<?php
$image = get_field('');
if (!empty($image)) :
 $size = 'large';
 $imgThumb = $image['sizes'][$size]; 
 $width = $image['sizes'][$size . '-width']; 
 $height = $image['sizes'][$size . '-height']; 
 $alt = $image['alt'];
?>
 <img src="<?php echo $imgThumb; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" alt="<?php echo $alt; ?>" loading="lazy" />
<?php else : ?>
 <img src="<?php echo get_template_directory_uri() ?>/assets/images/no_image.jpg" width="" height="" loading="lazy" alt="画像がありません">
<?php endif; ?>

ACFで設定した、画像を表示します。画像の返り値を「配列」にしてください。

ACFで設定した値を取得する。

👍

: all

<?php get_field('設定した値'); ?>

ACFで設定した値を取得します。 ACFで設定した値を変数に格納したいときは「get_field」を使用します。

ACFで設定した値を取得、表示する。

👍

: all

<?php the_field('設定した値'); ?>

ACFで設定した値を取得、表示までします。

カスタム投稿の一覧表示件数の変更。

👍

: functions.php

function change_posts_per_page($query)
{
  // カテゴリー名
  if (is_admin() || !$query->is_main_query())
    return;
  if ($query->is_post_type_archive('カスタム投稿タイプを指定')) { 
    $query->set('posts_per_page', '12'); //表示件数を指定
  }
  if ($query->is_tax('カスタムタクソノミーを指定')) { 
    $query->set('posts_per_page', '12'); //表示件数を指定
  }
}
add_action('pre_get_posts', 'change_posts_per_page');

カスタム投稿の一覧表示の件数を変更します。また、タクソノミー一覧の表示件数も合わせて変更できます。

WprdPerssでGoogleフォントを読み込む。

👍

: functions.php

function my_enqueue_fonts() {
    // Noto Sans JP
    wp_enqueue_style('googlefont-noto-sans-jp', 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap', array(), '1.0.1');
    // Noto Serif JP
    wp_enqueue_style('googlefont-noto-serif-jp', 'https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap', array(), '1.0.1');
    // Roboto
    wp_enqueue_style('googlefont-roboto', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), '1.0.1');
}
add_action('wp_enqueue_scripts', 'my_enqueue_fonts');

functions.phpでGoogleフォントを読み込みます。「複数のフォントを1つにまとめるとURLが複雑になり、特定の太さ（ウェイト）が読み込まれないなどの表示トラブルが起きやすいため、確実性を優先して個別に読み込みこむことを推奨。」

お問い合わせ送信後、サンクスページへ遷移させる。

👍

: functions.php

add_action('wp_footer', 'add_single_form_thanks_page');
function add_single_form_thanks_page()
{
  $contact_thanks = home_url('/contact/thanks/'); // サンクスページURL

  echo <<<EOC
    <script>
      document.addEventListener('wpcf7mailsent', function() {
        location.href = '{$contact_thanks}';
      }, false);
    </script>
    EOC;
}

お問い合わせ後、サンクスページへ遷移させます。「page-thanks.php」を作成してください。「contact.php」を親ページとしてください。

All