これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki(Pro)
  4. Nishiki Pro:フックを使って特定の条件によってロゴ画像を変更する方法

このページでは、Nishiki Pro テーマを使って特定の条件によってロゴ画像を変更する方法について解説しています。

注意!

ここからの情報は、PHP でコードが書けたり、ワードプレスのカスタマイズ知識や技術をある程度持っている上級者向けの内容として公開しています。

カスタマイズ用のプラグインを作ったり、子テーマを作って functions.php 内にコードを追記するなどで実装してください。

このようなカスタマイズがスラスラできるようになると、ワードプレスを扱う技術力も向上し、自信にもつながります。

もし駆け出しや初心者の方でも「やってみようかなぁ・・・」と、やる気がある方は、ぜひ挑戦してみてください!

サンプルコード

nishiki_pro_custom_logo_attachment_id フィルターを使って、画像の添付 ID を変更しています。

つまり「表示したい画像の添付 ID を条件によって変えている」というコードですね。

// ロゴ画像を出し分け
if ( ! function_exists( 'nishiki_pro_custom_logo_image' ) ) {
    function nishiki_pro_custom_logo_image( $id ) {
        // $id は画像の添付 ID を指定
        
        // タグのアーカイブページでは画像の添付 ID が 9446 の画像を表示
        if( is_tag() ){
            $id = 9446;
        }
        
        return $id;
    }
    
    add_filter( 'nishiki_pro_custom_logo_attachment_id', 'nishiki_pro_custom_logo_image', 10, 1 );
}

画像の添付 ID がわからない場合

「変更したい画像はあるんだけど、画像の添付 IDがわからない!」という場合もあると思います。

以下に 2 つの方法を書きましたので、参考ください。

1.画像の URL から 画像の添付 ID を取得する方法

画像の URL がわかっている場合は attachment_url_to_postid で取得できます。

2.ワードプレスの管理画面から画像の添付 ID を確認する方法

ワードプレスの管理画面から「メディア」を選択し、一覧の中から 1 つ画像を選択してください。

下の画像のように、画像を選択後の URL を見ると、画像の添付 ID がわかります。

この場合は「7603」が画像の添付 ID です

ワードプレスに画像をアップロードすると、画像それぞれに添付 ID が自動で割り振られます。その仕組みを利用した確認方法です。

ワードプレスの管理画面から確認する方法は YouTube にもアップしましたので、あわせて参考ください。

チャンネル登録もぜひ!

まとめ

今回紹介したサンプルコードのような、特定のページのみ変更する使い方だけではなく、多言語サイトを構築している場合は、英語/中国語など「別の言語のページではロゴ画像を変更する」なんて使い方もできます。

使い方次第なので、ぜひいろいろ試してみてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載したワードプレステーマです。

ブロックエディター機能を強化し、これまでのワードプレスでは難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイト、オンラインショップなど、様々な目的のウェブサイトに対応できるテーマです。

最新情報をチェック!

Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など