![[WordPress] よく使うスニペット集](https://metrograph.jp/wp-data/wp-content/uploads/2017/11/template-2.jpg)
[WordPress] よく使うスニペット集
webWordPress構築の際にいちいちググっていたものをまとめた、オレオレWordPressスニペット集。
ときどき追加修正します。
プラグイン
カスタム投稿
- Custom Post Type UI – カスタム投稿をUIで作成
- Custom Post Type Permalinks – カスタム投稿のパーマリンクを修正
現在の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;?>
タグアーカイブページへのリンクは、タグ名だったりタグスラッグだったり(?)するので要検証。