BackstopJSを利用するときにシナリオをCSVで書いて、jsonに変換する

以下を使えばうまくできる。

その際に利用するCSVはこんな感じ。基本的にlabelとurlの列のみ編集して増やしていけばOK

label,cookiePath,url,referenceUrl,readyEvent,readySelector,delay,hideSelectors,removeSelectors,hoverSelector,clickSelector,postInteractionWait,selectors,selectorExpansion,expect,misMatchThreshold ,requireSameDimensions
home,backstop_data/engine_scripts/cookies.json,https://www.hogehoge/,,,,0,[],[],,,0,[],TRUE,0,0.1,TRUE
guide,backstop_data/engine_scripts/cookies.json,https://www.hogehoge/guide/,,,,0,[],[],,,0,[],TRUE,0,0.1,TRUE
categoryinterview,backstop_data/engine_scripts/cookies.json,https://www.hogehoge/category/interview/,,,,0,[],[],,,0,[],TRUE,0,0.1,TRUE
news,backstop_data/engine_scripts/cookies.json,https://www.hogehoge/news/,,,,0,[],[],,,0,[],TRUE,0,0.1,TRUE

Bogoで上手に対応する手法

ショートコードでの利用

<?php echo do_shortcode( '[bogo]' ); ?>

言語別の判定の方法

// 言語を取得する
<?php $local = get_query_var('lang'); ?>
//条件分岐の例 英語だったら
<?php if($local == 'en_US'){echo "英語だよ";}else{echo "英語じゃないよ"}

wp cli を利用してuserのデータをアップデートする

  • wp cli を利用することで、サーバ側からuserの情報をアップデートすることが可能です。
wp user update {ユーザID} --user_pass={新しいパスワード}
  • user のIDを調べるには user listで一覧より確認可能です
wp user list

参考

新規に追加する場合は以下のようにすると、自動的にパスワードが発行される

$ wp user create ログインID メールアドレス --role=権限
Success: Created user 3.
Password: k9**&I4vNH(&
// 権限は次のどれかを設定 ‘administrator’, ‘editor’, ‘author’, ‘contributor’, ‘subscriber’. 

Snow Monkeyテーマでカスタム投稿タイプのsingleのレイアウトをカスタマイザーで設定できるようにする

前提条件

Snow Monkeyの子テーマがすでにあり、そちらが有効化されている(子テーマの作成方法については公式サイトを参照

手順

1.Snow Monkeyテーマの下記ファイルをコピーする

〜/wp-content/themes/snow-monkey/customizer/layout/sections/singular-post/section.php 

2. 子テーマ内に同じ階層になるようにディレクトリを作成し、そちらにコピーしたsection.php をペーストする
(〜/wp-content/themes/{子テーマ名}/customizer/layout/sections/singular-post/section.phpファイルが追加される)

3. テキストエディタで設置したsection.phpを開く

4. 28行目のコードを変更(※is_singularの配列に値を追加)

変更前のコード

return ( ! is_front_page() && ( is_singular( [ 'post', 'page' ] ) || is_404() ) );

変更後コード

return ( ! is_front_page() && ( is_singular( [ 'post', 'page', '{カスタム投稿名}' ] ) || is_404() ) );

pre_get_postsを利用して、特定の記事を一覧(アーカイブ)から除外する

普段どおりの書き方ですが、一つの記事だけを除外したい場合にもarrayで記述するというところがポイントです。

function ignore_selected_posts( $query ) {
	if ( is_admin() || ! $query->is_main_query() ) {
		return;
	}
	if ( $query-> is_archive( ) ) {
		$query->set( 'post__not_in', array('xxxxxx') );
	}
}


add_action( 'pre_get_posts', 'ignore_selected_posts' );

参考

Gutenberg editor (Block editor)で利用するブロックを制限する。

ディフォルトで多くのブロックが設定されているGutenberg editorのブロックを制限する方法です。

functions.phpで該当の enqueue_block_editor_assets にフックする関数を作成し、そこから wp_enqueue_script を利用してjsを読み込み設定を行います。今回は利用するブロックのみを指定する方法です。

functions.phpの設定

function block_allow_list() {
   wp_enqueue_script( 'allow-block-list', '/assets/js/allow-block-list.js', array( 'wp-blocks' ), '', true );
}
add_action( 'enqueue_block_editor_assets' 'block_allow_list' );

allow-block-list.jsの設定

// ブロックの利用を許可したものだけにする
const { _wpLoadBlockEditor } = window;
const { unregisterBlockType } = wp.blocks;
_wpLoadBlockEditor.then( () => {
  var allowedBlocks = [
    'core/paragraph',
    'core/image',
    'core/html',
    'core/heading',
    'core/list',
    'core-embed/twitter'
  ];

  wp.blocks.getBlockTypes().forEach( function( blockType ) {
    if ( allowedBlocks.indexOf( blockType.name ) === -1 ) {
      wp.blocks.unregisterBlockType( blockType.name );
    }
  } );
} );

ブロックの名前一覧

未検証なので名前が異なっている場合があります。参考までに

# 一般ブロック
段落	core/paragraph
画像	core/image
見出し	core/heading
リスト	core/list
カバー	core/cover
ギャラリー	core/gallery
引用	core/quote
音声	core/audio
ファイル	core/file
動画	core/video

# フォーマット
詩	core/verse
整形済み	core/preformatted
ソースコード	core/code
クラシック	core/freeform
カスタム HTML	core/html
プルクオート	core/pullquote
テーブル	core/table

# レイアウト
ボタン	core/button
カラム	core/columns
メディアと文章	core/media-text
続きを読む	core/more
改ページ	core/nextpage
区切り	core/separator
スペーサー	core/spacer


# ウィジェット
ショートコード	core/shortcode
アーカイブ	core/archives
カテゴリー	core/categories
最新のコメント	core/latest-comments
最新の記事	core/latest-posts

# 埋め込み
埋め込み	core-embed/embed
Twitter	core-embed/twitter
YouTube	core-embed/youtube
Facebook	core-embed/facebook
Instagram	core-embed/instagram
WordPress	core-embed/wordpress
SoundCloud	core-embed/soundcloud
Spotify	core-embed/spotify
Flickr	core-embed/flickr
Vimeo	core-embed/vimeo
Animoto	core-embed/animoto
Cloudup	core-embed/cloudup
CollegeHumor	core-embed/collegehumor
Dailymotion	core-embed/dailymotion
Funny or Die	core-embed/funnyordie
Hulu	core-embed/hulu
Imgur	core-embed/imgur
Issuu	core-embed/issuu
Kickstarter	core-embed/kickstarter
Meetup.com	core-embed/meetup-com
Mixcloud	core-embed/mixcloud
Photobucket	core-embed/photobucket
Polldaddy	core-embed/polldaddy
Reddit	core-embed/reddit
ReverbNation	core-embed/reverbnation
Screencast	core-embed/screencast
Scribd	core-embed/scribd
Slideshare	core-embed/slideshare
SmugMug	core-embed/smugmug
Speaker Deck	core-embed/speaker-deck
TED	core-embed/ted
Tumblr	core-embed/tumblr
VideoPress	core-embed/videopress
WordPress.tv	core-embed/wordpress-tv























参考

ConoHaサーバにおいて追加SSDを設定する

追加SSDのマウント

まず最初に以下を参考にSSDをマウントするところまで進めます。

https://www.conoha.jp/guide/addssd.php

マウントしたSSDに対するシンボリックリンク

既存のサイトの容量が増えすぎて、それを追加したSSDに移動したい場合にはシンボリック・リンクを利用します。シンボリック・リンクを設定すると既存のディレクトリと同じように、追加したSSDの領域を利用することが可能です。

今回は /data というところにSSDのマウントを行ったとして、そこに対して、既存の var/www/html/uploads みたいなディレクトリ以下をシンボリックリンクする方法です。

シンボリック・リンクを設定するときのコマンドは以下の通り。まずは /data の中に /var/www/html/uploads をコピーします。

$ cp -r /var/www/html/uploads/ /data/

コピーしたら、その場所に向かってシンボリック・リンクを設定します。コマンドは以下の通り

$ ln -s 追加SSDの場所 シンボリックの設定場所

例の場合だと、このようになります。

$ ln -s /data/uploads /var/www/

このように設定すればOKです。ただ注意点として、上記のコマンドを実行すると、`/var/www/uploads` というところにシンボリック・リンクが生成されるため、既存のディレクトリが存在していると重複してエラーが出ます。

なので、先にコピーが終わったら、 /var/www/uploads/ のフォルダをリネームするか削除してから作業を行いましょう。

get_custom_logoの内容を変更

function hogehoge_get_custom_logo() {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '',
        esc_url( home_url( '/' ) ),
        wp_get_attachment_image( $custom_logo_id, 'full', false, array(
            'class'    => 'custom-logo',
        ) )
    );
    return $html;
}
add_filter( 'get_custom_logo', 'hogehoge_get_custom_logo' );

WordPressのプラグインなどの翻訳の際の注意点

翻訳の流れ

  • 翻訳したいプラグインをみつける
    • https://wordpress.org/plugins/dark-mode/
  • 翻訳する
    • https://translate.wordpress.org/projects/wp-plugins/dark-mode
  • レビューしてもらう
    • たとえば https://profiles.wordpress.org/mayukojpn
  • 終わると、うまくいく

注意点

  • 英単語の両サイドはスペースを開ける
  • 記号(?や!など)は半角英数とし、前後にスペースをあける
  • あなたのダッシュボードといった、言い回しは日本語の場合はダッシュボードだけにする

wp-cli DBの置換

置換時の注意点

  • 前側が置換元で、後側が置換後
  • 必ず最後のスラッシュは無しにする

本番前のテスト

wp search replace 'http://example.dev' 'http://example.com' --dryrun

実際の置換

GUIDは残しておく

wp search-replace 'http://example.dev' 'http://example.com' --skip-columns=guid

参考サイト

Bootstrap v3 において特によく使いそうなコード

CDN Getting started · Bootstrap

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

グリッド CSS · Bootstrap

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8 col-lg-8">
            <p>ココに内容</p>
        </div>
    </div>
</div>

テキスト操作 CSS · Bootstrap

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ボタン CSS · Bootstrap

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

レスポンシブ時の表示非表示 CSS · Bootstrap

.visible-xs-*
.visible-sm-*
.visible-md-*
.visible-lg-*
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

画像を角丸にするなど CSS · Bootstrap

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

widgetの追加

widgetエリアを一つ追加する (twentysixteenテーマより)

  • functions.phpに記載
<?php
function twentysixteen_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Sidebar', 'twentysixteen' ), //ウィジェットの名前 (Languageファイルがない場合は、直接記載)
        'id'            => 'sidebar-1', //ウィジェットのID
        'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ), //ウィジェットの説明 (Languageファイルがない場合は、直接記載)
        'before_widget' => '<section id="%1$s" class="widget %2$s">', //ウィジェットの前に表示するタグ
        'after_widget'  => '</section>', //ウィジェットの後ろに表示するタグ
        'before_title'  => '<h2 class="widget-title">', //ウィジェットタイトルの前に表示するタグ
        'after_title'   => '</h2>', //ウィジェットタイトルの後に表示するタグ
    ) );
}

add_action( 'widgets_init', 'twentysixteen_widgets_init' );

上記のwigetを表示する

<?php dynamic_sidebar( 'sidebar-1' ); ?>

アイキャッチのある時と無い時、そしてサイズ指定

  • has_post_thumbnailで条件分岐
  • the_post_thumbnailでアイキャッチ画像表示
<?php if ( has_post_thumbnail() ) {
    the_post_thumbnail();
} else { ?>
    <img src="<?php echo get_template_directory_uri(); ?>/hogehoge.jpg" alt="<?php the_title(); ?>">
<?php } ?>

アイキャッチの画像サイズ指定

  • テンプレートタグ/the post thumbnail – WordPress Codex 日本語版
  • the_post_thumbnail(); // パラメータなし -> ‘post-thumbnail’
  • the_post_thumbnail( ‘thumbnail’ ); // サムネイル (デフォルト 150px x 150px :最大値)
  • the_post_thumbnail( ‘medium’ ); // 中サイズ (デフォルト 300px x 300px :最大値)
  • the_post_thumbnail( ‘large’ ); // 大サイズ (デフォルト 640px x 640px :最大値)
  • the_post_thumbnail( ‘full’ ); // フルサイズ (アップロードした画像の元サイズ)
  • the_post_thumbnail( array( 100, 100 ) ); // 他のサイズ

文字数を制限して表示する

下記はWordPressの記事タイトルが20文字以上になった場合に20文字で切り取り、その後に...をつけるというコード

<?php
if ( mb_strlen( $post->post_title, 'UTF-8' ) > 20 ) {
    $title = mb_substr( $post->post_title, 0, 20, 'UTF-8' );
    echo $title . '…';
} else {
    echo $post->post_title;
} ?>

ssh configとそれを利用したssh接続

ssh接続の際に、予め~/.ssh/内において config というファイルを作成し、その中で設定を行う。

鍵認証の場合

Host hoge
  HostName    000.000.000.000
  Port        22
  User        fuga
  IdentityFile ~/.ssh/hegu

パスワード認証の場合

Host hoge
  HostName    000.000.000.000
  User        fuga
  PreferredAuthentications password
  # パスワードをメモしておくとさらに便利

実際にsshにてリモートサーバにアクセスする場合は以下の通り

ssh hoge

markdownの記法

# 見出し1
## 見出し2
### 見出し3

--- 区切り線

- リスト
    - 子リスト
        - 孫リスト

---

1. 数字のリスト
1. 数字のリスト(数は自動的に増える)
    1. 子数字リスト
        1. 孫数字リスト

---

[リンクのテキスト](http://example.com)

---

![画像のalt](http://example.com/hogehoge.jpg)

---

```
この中身がコードブロック
```
---

`コード`文中のコード`<br>`の記述

---

参考

WordPressで必要となるcssをscssで読み込む

WordPressのエディター機能より中央寄せなどを行った際に、想定通りに動かすためのSCSS

/* WordPress need*/
.wp-caption,
.wp-caption-text,
.gallery-caption,
.entry-caption,
.bypostauthor,
.sticky {
    max-width: 100%;
}

.alignleft {
    float: left;
    margin-right: 10px;
}

.alignright {
    float: right;
    margin-left: 10px;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    // border: 1px solid #ccc;
    padding: 10px;
}

p.wp-caption-text {
    text-align: center;
    margin-bottom: 0;
    // font-size: 12px;
}

#wp-calendar {
    thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td, table thead tr th, table tfoot tr td {
        font-size: 12px;
        padding: 5px;
    }
}

table#wp-calendar {
    min-width: 100%;
    max-width: 100%;
    #next {
        text-align: right;
    }
}

レスポンシブなYouTubeの埋め込み

html

<div class="iframeWrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_iTJ4WHDhu4?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

scss

.iframeWrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Noto Sans Japaneseを利用する(cdn利用)

2017-03-01現在、コチラのサイトでも利用中のNoto Sans Japaneseです。CDNからの読み込みも比較的早く、ストレス無く利用できておすすめです。

フォントの読み込み

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
}

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-DemiLight.otf) format('opentype');
}

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 400;
   src: local('NotoSansJP-Regular.otf'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
 }

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
 }

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
 }

@font-face {
   font-family: 'Noto Sans Japanese';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Black.otf) format('opentype');
 }

フォントの適用(デフォルトテーマの場合)

html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea {
    font-family: Noto Sans Japanese,  "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

MySQL関連の操作

インポート

mysql -u mgn -p hogehoge > fugafuga.sql

エクスポート

mysqldump -u root -p hogehoge < fugafuga.sql

ログイン

mysql -uhogehoge -p

ログイン後の操作

データベース一覧を見る

show databases;

データベースを作成

create database hogehoge;

データベースを削除

drop database fugaduga;

mysqlからログアウト

quit;

owlcarouselを利用したカルーセル

  • レスポンシブへの対応
  • スワイプ可能
  • ナビゲーションのON,OFF

など使い勝手がよい

リソース

まず、上記URLより元のCSSとJSを読み込む。その上で下記のsnippetで利用する

カルーセルのコード

<div id="owl-demo" class="owl-carousel">
    <div class="item"><img src="http://placehold.it/800x300/cccccc/f6f6f6?text=one" alt="The Last of us"></div>
    <div class="item"><img src="http://placehold.it/800x300/444444/f6f6f6?text=two" alt="GTA V"></div>
    <div class="rand">
        <div class="item randitem"><a href="#"><img src="http://placehold.it/800x300/cccccc/f6f6f6?text=three"
                    alt="Mirror Edge"></a></div>
        <div class="item randitem"><a href="#"><img src="http://placehold.it/800x300/444444/f6f6f6?text=four"
                    alt="Mirror Edge"></a></div>
        <div class="item randitem"><a href="#"><img src="http://placehold.it/800x300/cccccc/f6f6f6?text=five"
                    alt="Mirror Edge"></a></div>
        <div class="item randitem"><a href="#"><img src="http://placehold.it/800x300/444444/f6f6f6?text=six"
                    alt="Mirror Edge"></a></div>
    </div>
</div>

追加するCSS

    #owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }

カルーセルの設定のjs

    <script>
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({

      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem : true,
      autoPlay : 2000
      });
    });
    </script>

記事に該当するタクソノミーを取得

<?php
// echo get_the_term_list($post->ID,'タクソノミー名'); ← もしリンク付きならこちらを採用
// リンクなしのカスタムタクソノミーを表示
if ( $terms = get_the_terms( $post->ID, 'タクソノミー名' ) ) {
    foreach ( $terms as $term ) {
        echo esc_html( $term->name );
    }
}

pre_get_postsのサンプル

利用シーン

  • 通常のループとは異なる表示件数でページ遷移したい場合など、通常ループを利用しつつ、改変したい場合はコチラを利用。
  • 通常のループをサブループで作ることは極力避ける
<?php
function change_posts_per_page( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return;
    }
    if ( $query->is_tax( 'タクソノミースラッグ', '' ) ) {
        $query->set( 'posts_per_page', '100' );
        return;
    }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );

// 参考
// query_postsを捨てよ、pre_get_postsを使おう【追記あり】【報告あり】
// http://notnil-creative.com/blog/archives/1688