[Chrome]どの拡張機能がエラーや警告の原因か調べる

  • 更新日:
  • 公開日:

調子にのって沢山の拡張機能を追加していると、気づけば開発者ツールでエラーや警告表示が出ていることがあります。

無駄なエラーや警告が表示されていると、コーディング中のデバッグ効率が落ちてしまいます。

このエラーや警告の原因となる拡張機能を探す方法が分かったのでメモします。

エラーや渓谷の原因となる拡張機能を探す

拡張機能のIDを探してコピー

Chromeの開発者ツールには以下のように表示されているかと思います。

この中のパス指定にある拡張機能のIDを見ます。

chrome-extension://[拡張機能のID]/editor/config.js.map

例えば今回だと「gpaiobkfhnonedkhhfjpmhdalgeoebfa」が拡張機能のIDです。

chrome-extension://gpaiobkfhnonedkhhfjpmhdalgeoebfa/editor/config.js.map

このIDをコピーしておきます。

Chromeの拡張機能一覧を開いて検索

Chromeブラウザの右上にあるメニューボタン(縦3点)をクリックし、「その他のツール > 拡張機能」をクリックして一覧表示します。

拡張機能一覧でWindowsならCtrl + F、MacならCmd + Fで検索欄を開き、先程コピーしたIDを貼り付けて検索します。

「gpaiobkfhnonedkhhfjpmhdalgeoebfa」はMicrosoftエディターと分かり、特に使用もしていないので削除しました。

これでまだエラーや警告が消えない場合は他にも原因となる拡張機能があるので、またIDで探しましょう。


IDでGoogle検索しても拡張機能が分かったりします。

[WordPress]テンプレートファイルをプラグインフォルダ内のファイルに置き換える

  • 更新日:
  • 公開日:

WordPressの親・子テーマが編集できない場合、プラグインによるカスタマイズが必要となります。

そんなときにプラグインからテンプレートファイルを置き換える方法について。

テンプレートファイルの置き換え方法

プラグインからtemplate_includeフックでメソッドを実行します。

プラグインのフォルダ構造

custom-plugin
│  custom-plugin.php
└─templates
        archive.php
        single.php

実際のコード例

投稿タイプworksのアーカイブや詳細ページのテンプレートを置き換える場合は以下のようにします。

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

define( 'MY_CUSTOM_PLUGIN', __FILE__ );
define( 'MY_CUSTOM_PLUGIN_DIR', untrailingslashit( dirname( MY_CUSTOM_PLUGIN ) ) );

class Customize_Plugin {
    function __construct() {
        // フック
        add_filter( 'template_include', array( $this, 'template_replacement' ), 10 );
    }

    // テンプレートの置き換え
    function template_replacement( $template_path ) {
        // worksアーカイブの場合
        if( is_post_type_archive( 'works' ) ) {
            $theme_file = MY_CUSTOM_PLUGIN_DIR . '/templates/archive.php';

            $template_path = $theme_file;
        }

        // works詳細の場合
        if ( is_singular( 'works' ) ) {
            $theme_file = MY_CUSTOM_PLUGIN_DIR . '/templates/single.php';

            $template_path = $theme_file;
        }

        return $template_path;
    }
}

new Customize_Plugin();

get_template_partを使っている箇所の対応

get_template_part()はどうやら読み込みファイルを変更するフックがないようでした。

なので、以下のようにincludeを使った読み込みに変更する必要があります。

while ( have_posts() ) :

    the_post();

    include MY_CUSTOM_PLUGIN_DIR . '/templates/content.php';

endwhile;

参考スレッド:get template part – How to include a file using get_template_part() in a plugin? – WordPress Development Stack Exchange

参考ソース:template.php in tags/3.7.1/src/wp-includes – WordPress Trac

[WordPress]WooCommerce Membershipsで投稿や固定ページがコンテンツ制限中か判定する

  • 更新日:
  • 公開日:

タイトルの通りWooCommerce Membershipsで投稿や固定ページがコンテンツ制限中か判定する方法について。

関数のwc_memberships_is_post_content_restrictedを使います。

// コンテンツ制限かの判定
if ( wc_memberships_is_post_content_restricted( get_the_ID() ) ) {
    echo 'コンテンツ制限中';
} else {
    echo 'コンテンツ制限なし';
}

int型引数の$post_idを指定しない場合、グローバルな$postオブジェクトからIDを拾って判定してくれます。


参考:WooCommerce Memberships Function Reference – WooCommerce

他にも「現在のユーザーが閲覧表示可能か」「商品表示が制限されているか」などの判定関数も記載されています。

[WordPress]Query Monitorをログアウト状態で使う

  • 更新日:
  • 公開日:

タイトルの通りログアウト状態でQuery Monitorを使う方法について。

「インストール済みプラグイン > Query Monitorの設定」か、管理画面のQuery Monitorウィンドウ右上にある歯車マークから設定を開きます。

すると設定タブが開かれるので、「認証 > 認証 Cookie を設定」をクリックすると「Authentication cookie is set」表示されます。

これでログアウトしてもQuery Monitorが使えるようになります。


WooCommerce Membershipsのカテゴリーページで表示される制限メッセージの「このカテゴリはメンバーだけが閲覧できます。」が何のアクションフックで実行&表示されているのか確認する必要が出たのでログアウト状態でQuery Monitorを使いました。

ちなみに、カテゴリーページのこの制限メッセージは「loop_start」フックで実行されていました。

[WordPress]カスタム投稿タイプアーカイブ/タクソノミーアーカイブ共通のBody Classを付与する

  • 更新日:
  • 公開日:

例えば投稿タイプ「works」のアーカイブページではbodyタグに「post-type-archive-works」が付与されるので、以下のようにCSSを書けます。

.post-type-archive-works .site-main {
    padding: 30px;
}

投稿タイプにはカスタム分類を追加することが多いので、カスタム分類アーカイブもCSSを追加する場合はセレクタに複数のクラス入れます。

.post-type-archive-works .site-main,
.tax-works_cat .site-main {
    padding: 30px;
}

一箇所ならすぐに作業が終わりますが、毎回この記述をするのは非効率に思います。こういう場合は共通のクラスをbodyタグに付与するようにします。

共通のBody Classを付与する

以下をfunctions.phpに記述します。

function works_body_class( $classes ) {
    // works投稿タイプか、worksカテゴリの場合
    if ( is_post_type_archive( 'works' ) || is_tax( 'works_cat' ) ) {
        // bodyに専用クラスを付与
        $classes[] = 'works-archive';
    }

    return $classes;
}
add_filter( 'body_class', 'works_body_class' );

こうするとCSSを簡素化できます。

.works-archive .site-main {
    padding: 30px;
}

目新しくはありませんが、1つ思いついたのでメモでした。

[WordPress]Advanced Post Queriesの日時がズレる問題

  • 更新日:
  • 公開日:

今までスニペットやら解決策を書くのみだったのですが、個人ブログですしもう少しゆるく更新してみることにします。

今回はElementorの投稿表示ウィジェットで複雑なクエリー指定ができるようになる『Advanced Post Queries』についてです。

日時クエリーに時間を含めた場合、日本時間だとズレてしまう

Advanced Post Queriesは表示する投稿のクエリーに日時を指定することができます。

そして指定する日時には投稿日時やカスタムフィールドの値を使うことができます。WP_Queryクラスのコードベース(meta_query)で行うことがGUIから出来るワケですね。

この上で「Query by the time」をONにすると時間を含めたクエリーにすることができます。コードで言うとmeta_queryの「DATETIME」に当たりますね。

しかし、日本時間だと時間がズレて正常なクエリーになりませんでした。結果から言うとタイムゾーンが原因でした。

プラグインファイルを修正する必要があるため作者に連絡しました

現状の解決としてはプラグインファイルを直接修正するしかないのでそのようにしました。プラグインファイル内のdate()date_i18n()にすると解決します。

しかしこれだとプラグイン更新時に作業内容が元に戻ってしまうため、プラグイン作者に公式フォーラムより連絡しておきました。

Timezone error due to date () function

実際に修正が必要なファイルの場所は上記スレッドをご確認いただければと。

ゆるい活動報告でした。

[WordPress]マルチサイトでサイトが作成されたときに処理を実行する

  • 更新日:
  • 公開日:

マルチサイトでサイトを作成したときに処理を実行したかったので、それのスニペットになります。

サイト初期化用フックで関数を実行する

サイト作成時に用意されているwp_initialize_siteフックを使います。以下はサイト作成時に固定ページを作成する例になります。

/**
 * サイト作成時に固定ページを作成する
 */
function my_wp_initialize_site( $new_site, $args ) {
    // 現在のブログID(メインサイト)を取得
    $current_blog_id = get_current_blog_id();

    // 新規作成したブログに切り替え
    switch_to_blog( $new_site->blog_id );

    // 固定ページの作成
    $post_details = array(
        'post_title'    => $args['title'] . ' Front Page',
        'post_status'   => 'publish',
        'post_author'   => $args['user_id'],
        'post_type' => 'page'
    );
    wp_insert_post( $post_details );

    // 現在のブログに戻す
    switch_to_blog( $current_blog_id );
}
add_action( 'wp_initialize_site', 'my_wp_initialize_site', 10, 2 );

2つ目の引数には作成したサイトの名前やユーザーIDが渡ってくるので、これを利用して固定ページを作成することができます。

もう1つのフックについて

旧バージョンだとwpmu_new_blogが用意されていましたが、バージョン5.1.0より非推奨のフックとなりました。

これの代用でwp_insert_siteフックもあるのですが、wp_initialize_siteの方が渡ってくる引数が1つ多く使い勝手が良いため、今回はこちらを使用しています。

ただし実行順番はwp_insert_siteの方が早くこちらはデータベースが作成された段階なので、場合によって使い分けるのが良さげです。

詳細は「wp_insert_site() | Function | WordPress Developer Resources」を確認することをオススメいたします。

渡ってくる引数の中身

ちなみに以下は、フックした関数に渡ってくる引数の内容をダンプしたモノです。

# 1つ目の引数「$new_site」に渡ってくるオブジェクトの例
object(WP_Site)#13311 (12) {
  ["blog_id"]=>
  string(1) "7"
  ["domain"]=>
  string(19) "example.com"
  ["path"]=>
  string(7) "/test-site/"
  ["site_id"]=>
  string(1) "1"
  ["registered"]=>
  string(19) "2020-02-11 04:58:07"
  ["last_updated"]=>
  string(19) "2020-02-11 04:58:07"
  ["public"]=>
  string(1) "1"
  ["archived"]=>
  string(1) "0"
  ["mature"]=>
  string(1) "0"
  ["spam"]=>
  string(1) "0"
  ["deleted"]=>
  string(1) "0"
  ["lang_id"]=>
  string(1) "0"
}

# 2つ目の引数「$args」に渡ってくる配列の例。タイトルや作成時に設定したユーザーIDなどが含まれます。
array(3) {
  ["title"]=>
  string(5) "Test Site"
  ["user_id"]=>
  int(1)
  ["options"]=>
  array(1) {
    ["WPLANG"]=>
    string(2) "ja"
  }
}

以上です。参考になれば。

[Blender]言語を日本語に設定する

  • 更新日:
  • 公開日:

Blenderで言語を日本語に設定する方法です。

古いバージョンでの言語切替方法は見つかったのですが、バージョン2.81はメニュー位置が新しくなって設定場所が分からなかったのでメモ。

Blenderを日本語に設定する

上部メニューの「Edit > Preferences…」をクリックして設定を開きます。

環境設定を開いたら、Interfaceタブにある3つ目の項目「Translation」にチェックを入れます。

「Language」を”Japanese (日本語)”に変更し、「Interface」にチェックを入れるとUIが日本語に変更されます。

「New Data」は新しく作ったオブジェクト名などが日本語の状態で作成されます。

例えば立方体のオブジェクトを追加すると「立方体」という名前のオブジェクトになり、マテリアルも「Material」と日本語名で作成されます。

オブジェクト名が日本語だとUnityにインポートしたときに違和感があったので、私は「New Data」にチェックは入れませんでした。

以上になります。

oEmbedのファビコン表示に対応する

  • 更新日:
  • 公開日:

WordPressテーマをリニューアルしてから、oEmbedによるWordPress埋め込みカードのファビコンが表示されていないことに気が付きました。

赤枠部分にファビコンが表示されていない

自作テーマを使用しているとハマる罠かもしれません。

表示されない原因

oEmbedでのファビコン表示にはget_option( 'site_icon' )を使用しているので、linkタグでheader.phpに直接コーディングしても読み取ってくれないのです。

get_option()を使用しているので、WordPress側で設定する必要があります。

oEmbedのファビコン表示に対応する方法

ファビコン画像を用意している前提になります。(png形式、512 × 512ピクセル以上が望ましいです。)

対応方法は至って簡単でして、管理画面メニューの「外観 > カスタマイズ」にあるカスタマイザーを使用します。

「サイト基本情報」をクリックします。

「サイトアイコンを選択」をクリックし、ファビコン画像をアップロードして選択します。

最後にカスタマイザーの「公開」ボタンを押してファビコンを保存しましょう。

これで完了です。

カスタマイザーで設定する方法が最適解かもしれない

対応していて気がついたのですが、ファビコンをheader.phpなどに直にコーディングするより、WordPressのカスタマイザーからファビコンを設定する方法が一番楽です。最適解と言っても過言では無いかもしれません。

以下はカスタマイザーからファビコンを設定した場合に吐き出されたheadタグのコードです。

<link rel="icon" href="https://i1.wp.com/increment-log.com/wp-content/uploads/2019/10/cropped-increment-log-logo_512.png?fit=32%2C32&ssl=1" sizes="32x32"/>
<link rel="icon" href="https://i1.wp.com/increment-log.com/wp-content/uploads/2019/10/cropped-increment-log-logo_512.png?fit=192%2C192&ssl=1" sizes="192x192"/>
<link rel="apple-touch-icon-precomposed" href="https://i1.wp.com/increment-log.com/wp-content/uploads/2019/10/cropped-increment-log-logo_512.png?fit=180%2C180&ssl=1"/>
<meta name="msapplication-TileImage" content="https://i1.wp.com/increment-log.com/wp-content/uploads/2019/10/cropped-increment-log-logo_512.png?fit=270%2C270&ssl=1"/>

通常のファビコン指定の「rel=”icon”」、iPhoneやiPadなどのブックマークアイコン指定の「rel=”apple-touch-icon-precomposed”」、Windows系のブックマークアイコン指定の「name=”msapplication-TileImage”」が全て自動的に最適化されたサイズで出力されます。

また、JetpackのCDN「Site Accelerator(旧名:Photon)」を通したファビコンURL指定になるのでWebサイト表示のパフォーマンスもアップします。

おそらく今後新たにアイコン指定する必要のあるコードが出てきた場合もWordPressが対応してくれるかと思うので、この方法が最適解なのではと判断します。

おまけ:ファビコンを取得しているプログラムの場所

おまけでoEmbedのサイト名やファビコンを取得しているプログラムについて。

「wp-includes/embed.php」の1119行目辺りにありました。

/**
 * Prints the necessary markup for the site title in an embed template.
 *
 * @since 4.5.0
 */
function the_embed_site_title() {
	$site_title = sprintf(
		'<a href="%s" target="_top"><img src="%s" srcset="%s 2x" width="32" height="32" alt="" class="wp-embed-site-icon"/><span>%s</span></a>',
		esc_url( home_url() ),
		esc_url( get_site_icon_url( 32, admin_url( 'images/w-logo-blue.png' ) ) ),
		esc_url( get_site_icon_url( 64, admin_url( 'images/w-logo-blue.png' ) ) ),
		esc_html( get_bloginfo( 'name' ) )
	);

	$site_title = '<div class="wp-embed-site-title">' . $site_title . '</div>';

	/**
	 * Filters the site title HTML in the embed footer.
	 *
	 * @since 4.4.0
	 *
	 * @param string $site_title The site title HTML.
	 */
	echo apply_filters( 'embed_site_title_html', $site_title );
}

もし「oEmbedで表示するファビコンのみ変えたい」といった要望の場合はembed_site_title_htmlフィルターに関数をフックすることで対応可能になります。

もしくはテーマディレクトリ直下に「embed-content.php」という名前でoEmbed用テンプレートを作成し、独自のHTML構造に書き換えることも可能です。デフォルトの埋め込みテンプレートは「wp-includes/theme-compat/embed-content.php」をご参照ください。

追記:上記でもoEmbedにファビコンが表示されない場合

上記の方法でもoEmbedにファビコンが表示されない場合、別プラグインによってHTML構造が書き換わったのが原因の可能性があります。

私の場合は「Autoptimize」のLazy Load機能をONにしているのが原因で表示されませんでした。なのでAutoptimizeのLazy Load機能は諦めてJetpackによる画像遅延読み込みで対応するようにしています。

[Nuxt.js]現在のページ名(ビューファイル名)を取得する

  • 更新日:
  • 公開日:

ページ遷移時のアニメーションやページ専用の処理をしたいとき、現在表示しているページ名(ビューファイル名)を取得したい場合があると思います。

このページ名の取得方法について記します。

$routeオブジェクトのname変数から取得

私が思いつく限りでは$routeオブジェクトのname変数で取得する方法があります。this.$route.nameというような記述ですね。

以降は「pages/article.vue」という構造を元に、ビュー「article.vue」のファイル名”article”を取得して処理する例になります。

テンプレートの例

<template>
  <div>
    <transition name="fade">
      <div v-if="this.$route.name === 'article'">
        <p>{{ this.$route.name }}</p>
      </div>
    </transition>
  </div>
<template>

4行目で現在のビューファイル名を取得し、「article.vue」だった場合にフェードアニメーションさせる例です。(アニメーションCSSは別途必要になります)

JavaScriptの例

export default {
  computed: {
    // ページ名(ビュー名)を返す
    currentViewName: function() {
      return this.$route.name;
    }
  }
}

JavaScriptはwatchmounted()など沢山あるのでcomputedメソッドで使用する場合を例にしました。

middlewareで取得しストアに保存する方法もある

他の例として、Nuxt.jsのmiddlewareを使ってグローバルなストアに保存して取得する方法もあります。

「set-page-name.js」というようなファイルをmiddlewareディレクトリに作成して以下のコードを記述します。

export default function({ store, route }) {
  store.commit("setPageName", route.name);
}

middlewareファイルでは上記のように、用意されたコンテキスト”store”、”route”を引数に指定してストアやルートにアクセスします。

作成したmiddlewareは忘れずにnuxt.config.jsへ追加します。

module.exports = {
  router: {
    middleware: ["set-page-name"]
  }
}

後は以下のように、ストアのstate、mutationsを各ファイルで用意します。

store/state.js:(データ格納用変数の定義)

export default () => ({
  pageName: "index"
});

store/mutations.js:(セッタの定義)

export default {
  setPageName(state, pageName) {
    state.pageName = pageName;
  }
};

こうすることでも「$route.name」と同じく、store.state.pageNameの記述で現在のページ名(ビューファイル名)を取得できます。

どちらを使えばいいか

これは「どのタイミングでページ名(ビューファイル名)を取得したいか」によって変わってきます。

ただ表示したいだけならどの方法でも問題ないかと思いますが、「REST APIでデータを取得できた段階でアニメーションさせたい」といった場合はasyncData()で完了後に取得するなど様々です。

仕様によって取得する方法を適宜変えるのがよろしいかと思いますので、参考用にNuxt.js(Vue.js)のライフサイクルまとめ記事を貼っておきます。

Vue.js と Nuxt.js のライフサイクル早引きメモ – Qiita