WordPress|ギャラリー向けテーマ「NUMERO」のカスタマイズメモ

先日、写真ギャラリーにお勧めの WordPress テーマ「NUMERO」の紹介記事を書きましたが、構築していく上でネット上にカスタマイズの情報が少なかったので、ここでは僕がカスタマイズした内容をメモ代わりに紹介していきます。

子テーマを作成

CSSファイルをちょこっとカスタマイズしたいだけなら、追加CSSに記述するだけで十分ですが、ある程度のカスタマイズ量だったり、JS、PHPファイルのカスタマイズを予定している場合は、子テーマを作成して運用した方が断然便利です。一部、テーマの中には子テーマに対応していないものもありますが、少なくとも「NUMERO」に関しては子テーマに完全に対応しています。

ここでは子テーマを作成する方法を簡単に説明します。

必要なファイル

まずは、ファイルを格納するフォルダ「numero-child(フォルダ名は何でも良い)」を作成し、必要最低限の下記2つのファイルを用意します。

  • style.css
  • functions.php

それぞれのファイルに下記をコピーして保存します。

style.css
@charset "utf-8";
/*
Theme Name:Numero Child
Template:numero_tcd070
Description:WordPressテーマ「Numero」の子テーマ
Author:hidepooh
Version:1.2.3
*/
  • Theme Name: テーマの名前(何でも良い)
  • Template: 親テーマのフォルダ名
  • Description: 子テーマの説明(不要なら空欄、または行ごと削除)
  • Author: 子テーマの製作者(不要なら空欄、または行ごと削除)
  • Version: 子テーマのバージョン(不要なら空欄、または行ごと削除)
functions.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

その他、トップページをカスタマイズしたいなら front-page.php を、ギャラリーのサムネイルリストをカスタイズしたいなら、template-parts/gallery-archive-grid.phpをフォルダーに格納します。この時、必ず親テーマのフォルダ構造に従って配置します。要するに子テーマの各フォルダが親テーマの各ファイルを上書きするイメージです。また、子テーマのサムネイルを設定する場合は、screenshot.png を同じフォルダに入れておきます。

screenshot.png の推奨形式
  • ファイルサイズ: 1200 x 900 (px)
  • ファイルタイプ: png

公式サイト参照

全てのファイルが揃ったら、フォルダごとサーバー上のテーマフォルダにアップロードし、管理メニューから有効化すれば完了です。

ドロップダウンメニューの表示に遅延を加える

ドロップダウンのメニュー表示に遅延がないと、マウスポインターがメニューの上を通過するたびにドロップダウンが表示されてしまい非常にウザいことになります。下記のコードを追加することで、マウスポインターがメニューの上に乗ってからドロップダウンメニューが表示されるまでの時間を少し遅らることができます。

初期値は 0(ゼロ)で、数値が大きくなればなるほど遅くなります。あまり遅くし過ぎてもストレスになるので 0.5 前後がちょうどよいと思います。

ドロップダウンメニューのオンマウス表示は、PC表示でのみのため、親テーマの style.css と同じように、メディアクエリ( @media (min-width: 992px) )を追加しておくようにしましょう。

style.css
@media (min-width: 992px) {
	.p-global-nav .menu-item-has-children:hover > .sub-menu {
		-webkit-transition-delay: 0.4s;
		-moz-transition-delay: 0.4s;
		-ms-transition-delay: 0.4s;
		transition-delay : 0.4s;
	}
}

メガメニュー の表示に遅延を加える

ドロップダウンメニューに遅延を追加しても、ギャラリーやブログのメガメニューには反映されないため、別途設定が必要です。速度の数値はドロップダウンメニューと同じにしておくのが無難だと思います。

メガメニューは元々スマホでは完全に非表示となるため別途メディアクエリは不要です。

style.css
.p-megamenu:hover, .p-megamenu.is-active {
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	transition-delay : 0.4s;
}

ギャラリーのカメラアイコンを非表示

デフォルトでは、ギャラリーのサムネイル上に「モーダルギャラリー」用のカメラアイコンと、「アルバム(記事)詳細ページ」アイコンの2つが表示され、設定で無効にすることはできません。この 「モーダルギャラリー」 は、アルバムに関係なく、全ての写真を一枚一枚拡大して閲覧できる機能なのですが、初めて訪れた人にとってはこの機能の意味/位置づけが分かりづらく、またアルバム単位で見せたい僕にとっては全く不要な機能なのでアイコンを非表示にします。

style.css
.p-archive-gallery__item-button-gallery {
	display: none;
}
.p-archive-gallery__item-button + .p-archive-gallery__item-button {
	margin-left: 0;
}

参考サイト: TCD LABO

ギャラリーのアイコンを拡大(モバイル時のみ)

PCの場合はあまり気にならないのですが、モバイルで見ると、アイコンが小さすぎて詳細ページのリンクが分かりずらいため、アイコンを少し大きくしてみました。カメラアイコンを非表示にしている場合は、アルバム(記事)詳細リンクアイコンを思い切って 200%とかにしてしまっても良いかもしれません。

style.css
@media only screen and (max-width: 991px) {

	/* アルバム(記事)詳細リンクアイコン */
	.p-gallery-link-icon::before{
		font-size: 150%;
	}

	/* カメラアイコン */
	.p-archive-gallery__item-button-gallery::before{
		font-size: 200%;
	}
}

ギャラリー&ブログ一覧の左右のスペースを消す(モバイル時のみ)

デフォルトでは、モバイル(991px以下)の際、ギャラリー、ブログのカテゴリメニューは横一杯に広がり、左右のスペースがなくなります。一方、サムネイル一覧の左右のスペースは残ったままとなってしまうため、カテゴリメニューと同様の処理を追加して左右のスペースを消します。

style.css
@media only screen and (max-width: 991px) {
	.p-archive {
		margin-left: -6.34%; margin-right: -6.34%;
	}
}

この記事を書いた人

日本では主にUNIXサーバーの構築、運用などに携わり、2006年に仕事を辞めてカナダに来てそのまま永住。

カナダでは、日本からカナダに留学や永住、ビジネスで渡航する人たちのサポートを行う傍ら、専門分野+趣味でもあるWeb制作、運用を継続しながら、最近では写真/動画撮影、動画制作、モーショングラフィックなど、新しい分野のスキルアップに励んでいます。

Peas Code は、僕が過去の経験の中で学んだことを、特定の分野に限定せず公開していくことを目的としています。中にはコードに見えてしまうような意味不明な僕独自の理論も含まれますが、知っていると平和になれると言う意味で、Peas(peace → peas) Code と名付けました。これが意味不明か・・・。

僕について、もうちょっと詳細を知りたいという変わった人は[About me]を見てください。

All Comments

  • はじめまして。
    突然のご連絡失礼致します。
    現在、NUMEROを使用してポートフォリオサイトを作成しております。
    私が作成しているサイト内個別の作品紹介ページのキャプチャ画像が劣化して見えてしまっているのですが、ソースコードを修正すると画像が劣化せずに表示されるのでしょうか。
    また、劣化させずに表示する方法をご存じでしたら、ご教授いただければ幸いです。

    のんのん 2021年7月31日 1:55 AM 返信
    • はじめまして。
      コメントありがとうございます!
      個別の作品紹介ページのキャプチャ画像が劣化しているとのことですが、該当する画像というのは、下記などのページで紹介しておられるWebサイトのスクリーンショット画像のことでしょうか。

      https://non-nonblog.jp/gallery/item-page05/

      その中のたとえば下記の画像は、813 x 1471 px となっていますが、実際にアップロードした写真はこれよりも大きいもので、アップロード時にサイズが小さくなってしまったということか、もしくは、サイズは同じだが、画質が劣化しているということでしょうか。
      https://non-nonblog.jp/wp-content/uploads/2021/07/%E3%82%B0%E3%83%AA%E3%83%A9%E3%83%BC_2.jpg

      一応、こちらで見る限りは、特に劣化しているようには見えないのでもしかしたら別のページ、別の写真のことかもしれないので、もし差し支えなければどちらのページ、写真のことか、返信いただけたらと思います。

      hidepooh 2021年8月3日 11:30 AM 返信
  • 初めまして参考にさせていただいてます!
    ギャラリースライダーの方にもモーダルギャラリースライダーのようなサムネイルを入れたスライダーを作りたいと思いSlic slider系のサイトとかも参考にして
    Style CSSやgallery.jsやphpを触ればよいということと、大体の場所は判るのですが、どこをどこまで触って良い物かがわかりません
    ここ最近毎日10時間程にらめっこして名前を変更したり試行錯誤していますが
    全く知識の無いずぶの素人には限界のようで知恵を貸していただければ嬉しいです。
    よろしくお願いします。

    konomichi 2021年9月21日 11:18 AM 返信
    • コメントありがとうございます。
      ご質問の内容の確認ですが、「NUMERO」テーマのギャラリーの各投稿内の本文中に、複数の画像がスライドするスライダーを導入したいということでしょうか。
      もしそれであれば、下記などの WordPresのプラグインを追加するのが一番簡単で確実かと思います。

      https://ja.wordpress.org/plugins/wp-slick-slider-and-image-carousel/

      僕は本テーマの制作であるTCDの人ではないため、技術的なサポートみたいなことはできないのですが、あくまでも一般的なご質問で僕が分かる範囲であれば回答させていただきますので、また遠慮なく聞いてください。

      hidepooh 2021年9月21日 11:55 AM 返信
  • 返信ありがとうございます。
    https://kenwheeler.github.io/slick/ の
    Slider Syncing みたいな感じです
    頂いたプラグインの場合記事1つ1つにHTMLで設定しなければならなく
    ギャラリーに登録したら自動的にスライダーに表示されるように、ギャラリーに登録した時点でその効果を発揮するという所を目指しているので

    konomichi 2021年9月22日 10:30 AM 返信
  • 途中で送信してしまいました。
    すみません
    少し違うように感じます
    自分であと100時間ぐらいにらめっこすればできるんじゃないかと思っておりますので
    引き続き頑張っていきたいと思います。
    ありがとうございました!

    konomichi 2021年9月22日 10:33 AM 返信
    • なるほど・・・。そうなると、やはり追加したいページのPHPテンプレートファイルに手を加え、ギャラリーに登録してある画像情報を取得するところが一番のポイントとなりそうですね。
      お力になれずに申し訳ありませんでした・・・m(__)m

      hidepooh 2021年9月22日 1:46 PM 返信
  • コメント失礼いたします。
    HPの刷新を行っており、今回NUMEROを購入いたしました。
    こちらのサイトを参考にさせて頂いております。
    可能であれば下記ご回答いただければ幸いです。

    ギャラリーカメラアイコンの非表示に関して記載がありましたが、
    アイコンを2つとも非表示にし、画像クリックで詳細ページに飛ぶ方法をご教示いただきたいと存じます。

    よろしくお願いいたします。

    KOBAYASHI 2022年1月16日 12:55 AM 返信
    • はじめまして。コメントありがとうございます。
      リンクを最大限に広げという処理をすれば実現できるかと思います。
      一応、下記のCSSを追加すれば、リンク幅を広げることは可能だと思います。
      中のテキストの配置など、細かい調整は別途調整してみてください。

      /* リンクの幅を最大限に広げる */
      a.p-archive-gallery__item-button.p-archive-gallery__item-button-link{
      position:absolute !important;
      display:block !important;
      width:100% !important;
      height:100% !important;
      left:0;
      top:0;
      background:none !important;
      border-radius: 0 !important;
      }
      /* コンテナを広げる */
      .p-archive-gallery__item-caption__inner {
      position: absolute;
      top:0;
      width:100%;
      height:100%;
      }
      /* アイコンを消す */
      a.p-archive-gallery__item-button:after{
      content:””;
      }

      hidepooh 2022年1月16日 11:27 PM 返信
      • ご丁寧にご教示いただき誠にありがとうございます。
        いただいた内容でほぼ問題なく対応できました。

        ただアイコンの消去のみできませんでした。
        現在の内容でも問題ないのですが、
        もしお手隙であれば、改めてアイコン非表示に関してご教示いただけますと幸いです。

        大変恐縮ではございますが何卒よろしくお願いいたします。

        KOBAYASHI 2022年1月17日 2:40 AM 返信
        • 前回の返信で書いた部分を下記のように修正いただくとアイコンは完全に消えるのではないかと思いますが、いかがでしょう。

          /* アイコンを消す */
          a.p-archive-gallery__item-button:before,
          a.p-archive-gallery__item-button:after{
          content:”” !important;
          }

          hidepooh 2022年1月18日 1:34 PM 返信
          • お忙しい中、ご回答いただき誠にありがとうございます。
            いただいたものでも消去ができませんでした。

            ただリンク幅とコンテナ位置での調整でアイコンを表示外に配置することはできるのでこちらで対応いたします。
            公式サポートでは対応していただけなかったのでとても助かりました。

            今後ともこちらのサイトを参考にさせていただきます。
            よろしくお願いいたします。

            KOBAYASHI 2022年1月18日 7:13 PM
  • HPのリンクを貼っておきますのでもし改善方法があればお手すきの際にご教示いただけますと幸いです。
    サポートでは何の対応もしていただけなかったのでこちらのサイト頼りになってしまっていますが何卒よろしくお願いいたします。

    KOBAYASHI 2022年1月18日 7:58 PM 返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です