[WordPress] よく使うスニペット集

[WordPress] よく使うスニペット集

web

WordPress構築の際にいちいちググっていたものをまとめた、オレオレWordPressスニペット集。
ときどき追加修正します。

プラグイン

カスタム投稿

現在のWordPress構築ではほぼ必須と思われるカスタム投稿(カスタムポスト)をUIで作成できるCustom Post Type UI。
カスタム投稿周りのパーマリンク問題を解決してくれるCustom Post Type Permalinks。

カスタムフィールド

  • Advanced Custom Fields – カスタムフィールドをUIで作成
  • Advanced Custom Fields: Options Page – どのページでも使えるカスタムフィールドを作成
  • Advanced Custom Fields: Repeater Field – リピートできるカスタムフィールドを作成

こちらも昨今のWordPress構築ではかかせないカスタムフィールド関係のプラグインたち。
Advanced Custom FieldsはUIでカスタムフィールドを追加できる神がかり的なプラグインです。
Options Pageはどのページからも読み込める共通のカスタムフィールドを作成できる機能を追加できる有料アドオン。
Repeater Fieldは、投稿画面から同じ内容のカスタムフィールドを追加(リピート)できる有料アドオン。
どちらも、Advanced Custom Fieldsの設定ページから購入できます。

パンくず

このプラグインで吐き出したパンくずは、Googleの検索結果にパンくずのリッチスニペットが表示されます。

お問い合わせ

ContactForm7より簡単で分かりやすいお問い合わせフォーム。
確認ページ、サンクスページの作成や、必須項目の設定等が容易です。

SEO

All in One SEOより簡単で強力なSEOプラグイン。
FacebookやTwitterのOGPも自動で吐き出してくれます。

よく使う関数

// </head>の直前に置く
<?php wp_deregister_script( 'jquery' ); ?> // WordPressデフォルトのjQueryを読み込まない
<?php wp_head(); ?>

// </body>の直前に置く
<?php wp_footer(); ?>

wp_head()とwp_footer()のふたつは、プラグインのCSSやJSを読み込んだりする際に必須。
また、wp_deregister_script( 'jquery' );をwp_head()の前に置くことで、WordPressデフォルトのjQueryを読み込ませないようにします。

URLの吐き出し

// トップページのURL
<?php bloginfo("url"); ?>

// テンプレートURL (適用しているテーマのディレクトリURL)
<?php bloginfo("template_url"); ?>

bloginfo("url")はサイト内のリンクなどに、
bloginfo("template_url")はテーマディレクトリにあるCSSやJSなどを読み込む際に使用します。

テンプレートの読み込み

// header.phpの読み込み
<?php get_header(); ?>

// footer.phpの読み込み
<?php get_footer(); ?>

// sidebar.phpの読み込み
<?php get_sidebar(); ?>

// 任意のテンプレートを読み込み
<?php get_template_part( 'template_name' ); ?>

文字列の表示

// コピーライトに今年の年を表示する
© 2010-<?php echo date('Y'); ?>

条件分岐

表示しているページで分岐

// トップページを表示していたら
<?php if( is_front_page() ): ?>
    // 処理
<?php endif; ?>

// アーカイブページを表示していたら
<?php if ( is_archive() ): ?>
    // 処理
<?php endif; ?>

// 固定ページを表示していたら
<?php if ( is_page() ): ?>
    // 処理
<?php endif; ?>

// 投稿ページを表示していたら
<?php if ( is_single() ): ?>
    // 処理
<?php endif; ?>

カスタム投稿で分岐

アーカイブページで分岐

// 何らかのカスタム投稿アーカイブページを表示していたら
<?php if ( is_post_type_archive() ): ?>
    // 処理
<?php endif; ?>

// 任意のカスタム投稿アーカイブページを表示していたら
<?php if ( is_post_type_archive('post_type_name') ): ?>
    // 処理
<?php endif; ?>

// カスタムタクソノミーアーカイブページを表示していたら
<?php if ( is_tax('tax_name') ): ?>
    // 処理
<?php endif; ?>

// タームアーカイブページを表示していたら
<?php if( is_tax('tax_name', 'term_name') ): ?>
    // 処理
<?php endif; ?>

投稿ページで分岐

// カスタム投稿の投稿を表示していたら
<?php if ( get_post_type() === 'post_type_name' ): ?>
    // 処理
<?php endif; ?>

モバイルかどうかで分岐

<?php if ( wp_is_mobile() ): ?>
  // モバイルの場合
<?php else: ?>
  // PCorタブレットの場合
<?php endif; ?>

<?php global $is_iphone; if ( $is_iphone ): ?>
  // iPhoneの場合
<?php else: ?>
  // その他の場合
<?php endif; ?>

ブラウザで分岐

ブラウザによって内容や処理を変えたい場合、独自で関数を作ったり、JSを書いたりする必要はありません。
WordPress標準で用意されている関数やグローバル変数を使用してみましょう。

Chromeの場合

<?php global $is_chrome; if ( $is_chrome ): ?>
  // Chromeの場合
<?php else: ?>
  // その他の場合
<?php endif; ?>

WordPress標準で用意されている$is_chromeという変数を使います。

Internet Explorerの場合

<?php global $is_IE; if ( $is_IE ): ?>
  // IEの場合
<?php else: ?>
  // その他の場合
<?php endif; ?>

IEも、WordPress標準で用意されている$is_IEを使います。

// 例えばこんな使い方
<body class="<?php global $is_IE; if ( $is_IE ) echo 'is-ie' ?>">

全人類の敵であるIEからのアクセスに対しては、bodyにis-ieというクラスを付与して独自のスタイルを当ててやりましょう。

ループ

メインループ

<?php while ( have_posts() ) : the_post(); ?>
    <?php the_content(); ?>
<?php endwhile; ?>

投稿ページの本文等で使用されるメインループ。

カスタム投稿を取得するサブループ

<?php
    $args = array(
        'post_type' => array( 'post_type_name','post_type_name' ), // 投稿タイプ名。複数可。
        'posts_per_page' => 10, // 取得投稿数
        'orderby' => 'date', // 並び順。
        'category_name' => 'category_name', // カテゴリ名。カンマで区切って複数も可。
        'tag' => 'tag_slug', // タグのスラッグ名。
        'meta_key' => 'key', // カスタムフィールドのキーを指定
        'meta_value' => 'value', // カスタムフィールドの値を指定
        'meta_value_num' => 10, // カスタムフィールドの値を指定
        'paged' => $paged, // ページャー使用時のページ数
    );
    $the_query = new WP_Query( $args );
?>

<?php while( $the_query->have_posts() ) : $the_query->the_post();  ?>
    // 処理
<?php endwhile; wp_reset_query(); ?>

ループ内で使う関数

// 投稿へのリンク
<?php the_permalink(); ?>

// 投稿名
<?php the_title(); ?>

// 投稿日
<?php the_time('Y.m.d'); ?>
// 下記のように日付フォーマットを変更できます
// Y.m.d = 0000.00.00
// Y/m/d = 0000/00/00
// Y-m-d = 0000-00-00 

// 本文
<?php the_content(); ?>

// 文字数を制限した本文
<?php echo mb_substr(strip_tags($post-> post_content),0,制限文字数).'…'; ?>

// 110文字の抜粋
<?php the_excerpt(); ?>

// アイキャッチ画像のURL
<?php the_post_thumbnail_url('full'); ?>

各種情報を取得・表示

カテゴリ情報を取得

// ループ内でカテゴリ情報を取得。
<?php $category = get_the_category(); ?>

// ループ外でカテゴリ情報を取得
<?php
    global $post;
    $category = get_the_category( $post->ID );
?>

// カテゴリーIDを表示
<?php echo $category[0]->term_id; ?>

// カテゴリー名を表示
<?php echo $category[0]->name; ?>

// カテゴリーのスラッグを表示
<?php echo $category[0]->slug; ?>

カスタム投稿タイプ情報を取得

function get_post_type_query() {
    if ( is_archive() ) {
        return get_query_var( 'post_type' );
    } else {
        return get_post_type();
    }
}

function.php
function.phpにこの関数を書いておきます。
こちらの記事を参考にさせていただきました。

<?php $post_type = get_post_type_query(); ?>

$post_typeに投稿タイプ名が入ります。

よく使うモジュール

グローバルナビの現在ページをアクティブ(カレント)にする

<nav class="hd_nav">
    <ul class="hd_nav_list">
        <li class="hd_nav_item <?php if( is_page('company') ) echo "is-active"; ?>">
            <a class="hd_nav_link" href="<?php bloginfo("url"); ?>/company">会社情報</a>
        </li>
    </ul>
</nav>

現在のページ(カレントページ)へのグローバルナビのリンクに”is-active”クラスを付与します。

コンテンツ内のタブなどで現在のページをアクティブ(カレント)にする

<?php if( have_rows("tab_list") ): ?>
    <ul class="tab_list">
    <?php
        $current_url = get_permalink();
        $tab_url = get_sub_field("tab_link");
      ?>
    <?php while ( have_rows("tab_list") ) : the_row(); ?>
      <li class="tab_item">
            <a class="tab_link<?php if( $current_url === $tab_url ) echo " is-active"; ?>" href="<?php echo $tab_url; ?>">
                <?php the_sub_field("tab_label"); ?>
            </a>
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>

カスタムフィールドで、関連記事をタブでリンクする時に使用。
tab_listというRepeaterフィールドがあったら.tab_listが表示されます。
$current_urlに現在開いているページのURLが入っています。
各タブのリンク先は$tab_urlに入っており、両者が一致したらis-activeクラスを付与しています。

カテゴリリストを表示

<?php $active_cat_name = single_cat_title('', false); ?>
<ul class="category_list">
<?php
$args = array(
    'orderby' => 'id',
    'hide_empty' => '0',
);
?>
<?php $categories = get_categories($args); ?>
<?php foreach( $categories as $val ): ?>
    <?php
        $cat_name = $val->name;
        $cat_link = get_category_link($val->cat_ID);
        $cat_count = $val->count;
    ?>
    <li class="category_item">
        <a class="category_link <?php if ( $cat_name === $active_cat_name ) echo 'is-active'; ?>" href="<?php echo $cat_link ?>"><?php echo $cat_name ?>(<?php echo $cat_count ?>)</a>
    </li>
<?php endforeach; ?>
</ul>

存在するカテゴリ分だけ、カテゴリ名・カテゴリパーマリンク・カテゴリ投稿数を取得し、liを書き出します。
アーカイブページや投稿ページを表示している場合は、is-activeクラスが付与されます。

投稿のタグリストを表示

<?php $postTags = get_the_tags(); ?>
<?php if ( $postTags): ?>
    <ul class="tag_list">
    <?php foreach($postTags as $tag): ?>
        <?php
            $tagName = $tag->name;
            $tagSlug = $tag->slug;
        ?>
        <li class="tag_item">
            <a class="tag_link" href="<?php bloginfo('url'); ?>/tag/<?php echo $tagSlug; ?>"><?php echo $tagName; ?></a>
        </li>
    <?php endforeach; ?>
    </ul>
<?php endif;?>

タグアーカイブページへのリンクは、タグ名だったりタグスラッグだったり(?)するので要検証。

目次へ戻る