AMPプラグインを利用したAMPページでリンク先URLにエンドポイント(?amp)を追加しない方法

WordPressのAMPプラグイン(https://ja.wordpress.org/plugins/amp/)を有効にしたサイトで、AMPページを表示した際に、基本的に同じサイト内のページへのURLにはエンドポイント(?amp など)が付与される形になります。

エンドポイントの付与を止めるには、下記コードをテーマ内(functions.php)あるいはオリジナルプラグインなどに記述する必要があります。

add_filter( 'amp_to_amp_linking_enabled', '__return_false' );

情報元: WordPress.Org サポートフォーラム

Block Labを利用したカスタムブロックのサンプル

ドキュメント

入力イメージ
<?php
/**
 * Youtube Block with Block Lab
 *
 * @package 1.0
 */

$youtube_id = block_field( 'youtube_id', $echo = false ); /** 表示する場合は第2引数をtrue */
if ( ! empty( $youtube_id ) ) {
	echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . esc_attr( $youtube_id ) . '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
} else {
	echo 'YoutubeIDを入力してください';
}

WordPressにおいて、すべてを自動アップデート

//自動アップデート
function always_return_false_for_vcs( $checkout, $context ) {
	return false;
}

add_filter( 'automatic_updates_is_vcs_checkout', 'always_return_false_for_vcs', 10, 2 );

add_filter( 'allow_major_auto_core_updates', '__return_true' );
add_filter( 'allow_minor_auto_core_updates', '__return_true' );
add_filter( 'auto_update_theme', '__return_true' );
add_filter( 'auto_update_plugin', '__return_true' );

CSS :notで複数の要素を指定する方法

CSSのでこのclassが付与されている以外というときに使用する「否定疑似クラス :not)」ですが、思いつくままに書いたらうまく動かなかったので、こちらに間違った記述と、無事動いた記述を記載しておきます

動かなかった記述

/* うまく動かない(.fugaだけ除外する形になる) */
h1:not(.hoge),
h1:not(.fuga){
    color: #000;
}

無事想定どおりに挙動した記述

/* うまく動く */
h1:not(.hoge):not(.fuga){
    color: #000;
}

wp_enqueue_styleとかwp_enqueue_scriptを利用するときに、バージョンにファイルの更新日を入れる

キャッシュ対策としていいですね。

wp_enqueue_style( 'megane_styles', get_template_directory_uri() . '/cssまでのpath', array(), date( 'YmdGis', filemtime( get_template_directory() . '/cssまでのpath' ) ) );
wp_enqueue_script( 'megane_scripts', get_template_directory_uri() . '/jsまでのpath', array(), date( 'YmdGis', filemtime( get_template_directory() . '/jsまでのpath' ) ), true );

WordPressのカスタムメニューをAMPのamp-sidebarで利用する

<?php
// カスタムメニューをamp-sitebarに対応
function mgn_add_site_nav() {
	if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
		function mgn_clean_nav_menu_items( $location ) {
			$locations = get_nav_menu_locations();
			if ( empty( $locations[ $location ] ) ) {
				return '';
			}
			$menu       = wp_get_nav_menu_object( $locations[ $location ] );
			$menu_items = wp_get_nav_menu_items( $menu->term_id );
			if ( empty( $menu_items ) || ! is_array( $menu_items ) ) {
				return '';
			}
			ob_start();
			foreach ( $menu_items as $key => $menu_item ) : ?>
				<li><a href="<?php echo esc_url( $menu_item->url ); ?>"
				       data-vars-clickurl="<?php echo esc_url( $menu_item->url ); ?>"><?php echo esc_html( $menu_item->title ); ?></a>
				</li>
			<?php endforeach;

			return ob_get_clean();
		}

		?>
		<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
		<amp-sidebar id="site-menu" layout="nodisplay" class="amp-sidebar">
			<ul>
				<?php echo wp_kses_post( mgn_clean_nav_menu_items( 'primary' ) ); ?>
			</ul>
		</amp-sidebar>

		<?php // Note that "site-menu" matches the id of the amp-sidebar element.
		?>
		<button on='tap:site-menu.toggle' class='toggle'><?php esc_html_e( 'Open Menu', 'wp-amp-tutorial' ); ?></button>
	<?php } else {
		wp_nav_menu( array(
			'theme_location' => 'primary',
			'container'      => 'div',
			'depth'          => 1,
			'menu_class'     => 'site-nav',
			'menu_id'        => 'site-nav',
		) ); ?>
		<button on='tap:site-menu.toggle' class='toggle'
		        id='navtoggle'><?php esc_html_e( 'Open Menu', 'wp-amp-tutorial' ); ?></button>
	<?php }
}

add_action( 'after_site-header', 'mgn_add_site_nav', 1 );

WooCommerceのマイページのメニューをカスタマイズ

対象の関数:wc_get_account_menu_items

 参考サイト

カスタマイズする

<?php
//マイページのダッシュボードメニューの設定
function custom_account_menu_items() {
	$myorder = array(
		'edit-account'       => __( 'アカウント編集', 'woocommerce' ),
		'dashboard'          => __( 'ダッシュボード', 'woocommerce' ),
		'orders'             => __( '注文履歴', 'woocommerce' ),
		'downloads'          => __( 'ダウンロード', 'woocommerce' ),
		'edit-address'       => __( '住所変更', 'woocommerce' ),
		'payment-methods'    => __( '決済方法', 'woocommerce' ),
		'customer-logout'    => __( 'ログアウトする', 'woocommerce' ),
	);
	return $myorder;
}
add_filter ( 'woocommerce_account_menu_items', 'custom_account_menu_items' );

結果

Snow Monkey のカスタマイズを子テーマではなく、プラグインで行った場合での、WooCommerceのテンプレートファイルをプラグインでオーバーライドする方法

前提条件

Snow Monkeyの v5.0 以上

手順

1.Snow Monkeyのカスタマイズ用プラグインを用意する
プラグインの有効化や初期設定はこちら
(https://snow-monkey.2inc.org/2019/02/04/my-snow-monkey-plugin/)

2.my-snow-monkey.phpを開き下記のコードを記入してください

〜/wp-content/plugins/my-snow-monkey/my-snow-monkey.php

//my-snow-monkeyでwoocommerceのテンプレートをオーバーライド
add_filter( 'woocommerce_locate_template', 'hogehoge_woocommerce_plugin_template', 1, 3 ); //hogehoge_woocommerce_plugin_templateはユニーク
function hogehoge_woocommerce_plugin_template( $template, $template_name, $template_path ) { //hogehoge_woocommerce_plugin_templateはユニーク
    global $woocommerce;
    $_template = $template;
    if ( ! $template_path )
        $template_path = $woocommerce->template_url;

    $plugin_path  = untrailingslashit( plugin_dir_path( __FILE__ ) )  . '/template/woocommerce/';

    // Loo within passed path within the theme - this is priority
    $template = locate_template(
        array(
            $template_path . $template_name,
            $template_name
        )
    );

    if( ! $template && file_exists( $plugin_path . $template_name ) )
        $template = $plugin_path . $template_name;

    if ( ! $template )
        $template = $_template;

    return $template;
}

3. 〜/wp-content/plugins/my-snow-monkey/template/woocommerce/ 配下で
〜/wp-content/plugins/woocommerce/templates/配下のテンプレートを使えるようになりました
ので、
自由でにWooCommerceテンプレートを小テーマで使う感じでオーバーライドできます。

例:送信完了メールをオーバーライドする
WooCommerceのデフォルトは 〜/wp-content/plugins/woocommerce/templates/emails/customer-completed-order.php
my-snow-monkeyプラグインでカスタマイズは 〜/wp-content/plugins/my-snow-monkey/template/woocommerce/emails/customer-completed-order.php

※通常の子テーマでオーバーライドする時は、〜/wp-content/themes/子テーマ名/woocommerce/emails/customer-completed-order.php

KUSANAGI環境でWordPressサイトが異様に重い場合

サーバーにKUSANAGIを入れているサイトで、サイトの表示、また管理画面へのアクセスなどが異様に重たくなった場合は、一度KUSANAGIを再起動させてみると解消する可能性があります。

1.SSHでKUSANAGIにログインし、下記コマンドを実行します

# kusanagi restart

上記コマンドを実行すると、nginx(あるいはhttpd) と、phpが再起動されます

All-in-One WP Migration プラグインにおいて wp-content/plugins/all-in-one-wp-migration/storage の読み取り・書き込み権限が無いと言われた場合

大抵は該当のディレクトリのパーミッションの問題です。PHPの実行権限にあわせて、ディレクトリのパーミッションを変えましょう。`httpd:www` の場合は以下の通り

chown -R httpd:www WordPressのあるディレクトリまでのpath/wp-content/plugins/all-in-one-wp-migration/storage

上記は-R とすることでディレクトリ配下の権限も一緒に変更しています。

これでも治らない場合、今度はバックアップの保存先である `/wp-content/ai1wm-backups` のディレクトリの権限が異なっている場合があります。この記事投稿時には、この部分の権限エラーの場合でも、タイトルと同じエラーが出るためにわかりにくいです。こちら上記と同様に権限を変更します。

chown -R httpd:www WordPressのあるディレクトリまでのpath/wp-content/ai1wm-backups

こちらで正常にバックアップができるはずです。

Woocommerceのマイページの住所内容を変更した時に走るhook

woocommerce_after_save_address_validation

例:

// define the woocommerce_after_save_address_validation callback 
function action_woocommerce_after_save_address_validation( $user_id, $load_address, $address ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'woocommerce_after_save_address_validation', 'action_woocommerce_after_save_address_validation', 10, 3 );

参照元:http://hookr.io/actions/woocommerce_after_save_address_validation/

Woocommerceのcheckout process時のhook

woocommerce_checkout_process

例:

// define the woocommerce_checkout_process callback 
function action_woocommerce_checkout_process( $wccs_custom_checkout_field_pro_process ) { 
    // make action magic happen here... 
}; 
         
// add the action 
add_action( 'woocommerce_checkout_process', 'action_woocommerce_checkout_process', 10, 1 ); 

参照元:http://hookr.io/actions/woocommerce_checkout_process

CloudFrontをWordPressで利用する場合にWhitelist Cookiesに設定しておいたほうが良い内容

CDNとして高速にWebページを表示してくれるCloudFrontですが、Cookieが基本的に受け渡されないため、WordPressにログイン後、作業するプレビューや、MW WP Formの送信、WooCommerceの利用などがうまくいかないです。のでそれらのCookieを普通に扱えるようにするための設定です。

"wordpress_*",
"wp-postpass_*",
"wp-resetpass-*",
"comment_author_*",
"mw-wp-form_*",
"woocommerce_*",
"wp_woocommerce_session_*"

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























参考

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' );

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

参考サイト

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;
} ?>

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;
    }
}

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

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