Sassの@importは遅くとも2021年10月1日から非推奨、その一年後の2022年10月1日には廃止される予定でした。9月末に滑り込みで@importを@useと@forwardに置き換えたのですが、よくよく調べてみるとサポート期間が延長されていました。 July 2022: In light of the fact that LibSass was deprecated before ever adding support for the new module system, the timeline for deprecating and removing @import has been pushed back. We now intend to wait until 80% of users are using Dart Sass (measured by npm downl

Moving Contentsは、投稿や固定ページ、カスタムメニューなどを別サイトに移行できるWordPressプラグインです。 簡単にコンテンツをお引越しすることが可能です。 Moving Contentsで維持される情報 以下の情報は移行元サイトの情報が維持されます。ただし、インポート時にユーザーの紐付けは変更可能です。 IDユーザーID日付と時刻投稿固定ページコメントカテゴリータグタクソノミーメディアライブラリ（データベースのみ） Moving Contentsのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール Moving Contentsをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Moving Contentsを有効化します。

ACF: Better Searchは、Advanced Custom Fieldsで追加したフィールドを検索対象に含めることができるWordPressプラグインです。 通常は、カスタムフィールドの値は検索対象からは除外されていますが、ACF: Better Searchを使えば簡単に検索対象に含めることが可能です。 ACF: Better Searchのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール ACF: Better Searchをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、ACF: Better Searchを有効化します。 WordPress管理画面でインストール [プラグイン] – [新規追加]にアクセスします。「ACF:

Cleanup.picturesは、写真の中にある消したい部分をなぞるだけで綺麗に消去してくれるWebサービスです。 いい写真が撮れたけど一部不要なモノが写ってしまって消したい、といった時に便利なサービスです。 Cleanup.picturesの使い方 Cleanup.picturesにアクセスして、写真をドラッグ&ドロップします。 ブラシで消したい部分をなぞります。消したい部分のギリギリをなぞると影が残る場合もあるので、気持ち広めになぞると綺麗に消すことができます。 すると、なぞった部分に写ったモノを一瞬で消してくれます。 [Download]をクリックすると、加工後の写真をダウンロードできます。 なお、[Original]を長押ししている間は、元の写真を確認可能です。 あとがき Photoshopなどのツールを使わなくても、簡単に消したい箇所を消去することができるので便利ですね。 写真

WordPressでカスタムタクソノミーやカスタムフィールドによる絞り込み検索を実装する方法をご紹介いたします。 以前、「チェックボックスによる絞り込み検索を実装する方法」や「セレクトボックスによる絞り込み検索を実装する方法」で絞り込み検索の実装方法を書きました。これらは、search.php内でquery_postsを使ってメインクエリを書き換えて検索結果を表示する方法でしたし、カスタムフィールドには触れていませんでした。 今回は、search.phpはいじらずにpre_get_postsというフックを使った方法で、さらにカスタムフィールドにも対応した絞り込み検索の実装方法をご紹介いたします。 カスタムタクソノミーやカスタムフィールドによる絞り込み検索を実装する方法 絞り込み検索用のフォームを設置 まずは、絞り込み検索のフォームを設置します。今回は以下のようなフォームを設置します。 カテ

WordPressの投稿一覧や投稿詳細で、投稿タイプの情報を取得・表示する方法をご紹介いたします。 投稿タイプの情報を取得することで、スラッグをページのクラスとして追加したり、ラベルをパンくずやタイトルとして表示することができます。

投稿や固定ページ内で使われているブロックのスタイルのみを読み込む方法 should_load_separate_core_block_assetsを使って、投稿や固定ページ内で使われているブロックのスタイルのみを読み込むには、適用しているテーマのfunctions.phpに以下1行を追加するだけでOKです。 <style id='wp-block-library-inline-css'> :root{--wp-admin-theme-color:#007cba;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-border-width-focus:2px}@media (-webkit-min-device-pixel-ratio:2),(min-reso

WP-functions generatorは、WordPressでサイトを作成する際、カスタマイズのためによくfunctions.phpに追加するコードを生成してくれるジェネレーターです。 ジェネレーターの制作者はたけろぐのたけさんです。 WP-functions generatorで生成できるカスタマイズ用のコード WP-functions generatorでは、以下のようなカスタマイズ用のコードを生成できます。 metaリンクの削除 DNS Prefetchの削除（emojiを削除する場合は不要）絵文字を削除外部アプリケーションから情報を取得するタグを削除フィード削除rel=”canonical”タグの非表示短縮URLの非表示現在の文書に対する「索引」であることを示すタグlink rel=next等のタグWordPressのバージョン情報を削除(5.6ではそもそも表示されない)デフ

MW WP Formで作成されたフォーム内で、ラジオボタンやチェックボックスの選択によって、必須項目を切り替える方法をご紹介いたします。 例えば、「その他」というラジオボタンが選択された場合のみ、特定のテキストフィールドを必須項目に変更するといったことが可能です。 MW WP Formで選択肢によって必須項目を切り替える方法 ラジオボタンやチェックボックスの選択項目によって必須を切り替えるには、mwform_validation_mw-wp-formというフックを使って制御します。 やり方については、NxWorldさんのこちらの記事で紹介されている通りなのですが、この方法に加えて必須を切り替える対象がチェックボックスやラジオボタンだった場合の対応方法もご紹介します。 ラジオボタンの選択項目によって必須を切り替える場合 ラジオボタンの選択項目によって必須を切り替えるには、適用しているテーマの

WordPressで特定の親ページの配下にある子ページかどうかを判別する方法をご紹介いたします。 例えば、aboutという親ページの配下にある子ページにのみ、aboutに関する内容を表示したい、といった時に役立ちます。

Custom Sidebarsは、ページ毎に表示するウィジェットを切り替えられるようになるWordPressプラグインです。 特定の投稿や固定ページで、サイドバー等のウィジェットエリアに表示する内容を変えたい時に便利です。 Custom Sidebarsのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール Custom Sidebarsをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Custom Sidebarsを有効化します。 WordPress管理画面でインストール [プラグイン] – [新規追加]にアクセスします。「Custom Sidebars」で検索します。[今すぐインストール]をクリックして、Custom Sidebarsをインスト

/* This was made with GlassGenerator.netlify.app */ .glass-container{ width: 700px; height: 375px; color: white; display: flex; justify-content: center; align-items: center; gap: 20px; border-radius: 10px; backdrop-filter: blur(5px); background-color: rgba(0,191,255, 0.075); box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px; border: 2px rgba(255,255,255,0.4) solid; border-bottom: 2px rgba(40,40,40,0.35)

WordPressで読み込んでいるCSSファイルのバージョン番号に、テーマのバージョンを使う方法をご紹介いたします。 通常は、wp_enqueue_styleで読み込むCSSには固定のバージョン番号を引数で指定しますが、テーマのバージョンをバージョン番号として使うことで、テーマの更新時にキャッシュもクリアされて結構便利だと思います。 WordPressで読み込んでいるCSSのバージョン番号としてテーマのバージョンを付与する方法 wp_get_theme関数について CSSファイルのバージョン番号にテーマのバージョンを付与するには、wp_get_theme関数を利用します。 wp_get_themeはテーマの情報を取得できる関数で、テーマのstyle.css内で定義されている以下の情報を取得できます。 NameThemeURIDescriptionAuthorAuthorURIVersion

WordPressで記事の最終投稿日を取得・出力する方法 最終投稿日を取得するには、get_lastpostdate関数を使います。最終投稿日を出力したい箇所で以下のように記述しましょう。 <?php $lastpost_date = get_lastpostdate('blog', '投稿タイプ名'); echo date('Y.m.d', strtotime($lastpost_date)); ?> まず、get_lastpostdateで最終投稿日を取得して$lastpost_dateに代入しています。そのままだと「2021-02-24 12:15:34」みたいな形式なので、date関数で「2021.02.24」という形式に変換して出力しています。 なお、get_lastpostdate関数で使えるパラメータは以下のようになっています。

PHP Intelephenseは、PHPのコード補完や構文チェックをしてくれるVSCodeの拡張機能です。 標準でもコード補完や構文チェックの機能は付いていますが、PHP Intelephenseはコード補完・構文チェックのみでなく、より便利な機能が使えるようになります。例えば、未使用の変数を教えてくれたり、変数名やクラス名から定義している箇所まで移動することもできたりします。 ただ、デフォルトの状態だとWordPressの関数を「未定義関数(Undefined function)」としてエラー扱いにしてしまいます。これを解消する方法をご紹介したいと思います。 PHP IntelephenseでWordPressの関数がエラー扱いになってしまう ※PHP Intelephenseのバージョンは1.6.2で確認しています。 WordPressのテーマファイルをVSCodeで開いてみると、以

Yoast Duplicate Postは、投稿・固定ページ・カスタム投稿・カスタムフィールドを複製できるWordPressプラグインです。また、既存のページを修正途中の状態で下書き保存できる「書き換え&再公開」という機能も備わっています。 通常は、修正途中の内容を保存したい場合、そのまま公開するか、ページ自体を下書きに戻して非公開にする、内容をテキストエディタで保存する等の対応が必要になります。 Yoast Duplicate Postを導入することで、ページの複製だけでなく、修正途中の内容を下書き保存しておいて、完成してから既存ページと差し替えることが可能になります。 Yoast Duplicate Postのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール Yoast Duplicate Postをダウンロードします。ダウンロードしたフ

WordPressの投稿詳細ページに、目次機能を追加する方法をご紹介いたします。 WordPressで目次機能といえば、「Table of Contents Plus」や「Rich Table of Contents」などのプラグインが有名ですが、今回はプラグインを使わない方法です。 WordPressにプラグインなしで目次機能を追加する方法 下記は、BLOG AND DESTROYさんの記事で紹介されていた方法です。コードの詳しい解説については、BLOG AND DESTROYさんの記事をご参照ください。 投稿詳細ページに目次機能を追加するには、functions.phpに以下を追記します。 function my_add_content( $content ) { if ( is_single() ) { // 属性を持たないh2・h3要素を正規表現で表すパターン $pattern =

Simple CSSは、特定の投稿や固定ページに、そのページでのみ読み込まれるCSSを追加することができるWordPressプラグインです。 また、サイト全体で読み込まれるカスタムCSSも追加できます。 Simple CSSのインストール インストール手順は以下の通りです。 ファイルをFTPでアップロードしてインストール Simple CSSをダウンロードします。ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。管理画面の[プラグイン]ページで、Simple CSSを有効化します。 WordPress管理画面でインストール [プラグイン] – [新規追加]にアクセスします。「Simple CSS」で検索します。[今すぐインストール]をクリックして、Simple CSSをインストールします。[有効化]をクリックしてプラグインを有効化します。 Sim

ワンクリックでテキストが全選択されるようになるCSSをご紹介いたします。 逆に、テキストを選択できないようにする方法も後述します。

<body class="home blog logged-in admin-bar wp-embed-responsive enable-search-modal has-no-pagination showing-comments show-avatars footer-top-visible customize-support"> ※Twenty Twentyのトップページ(投稿一覧)のソースです。ソースを確認すると、投稿一覧なので”home”というクラスが追加されていたり、ログイン中なので”logged-in”というクラスが付いていることがわかります。 このように、body_class()を入れるだけで、ページによって異なるクラスを追加してくれるようになります。 ただ、自動で追加されるクラスだけでなく、独自のクラスを追加したいというケースがあるかもしれません。また、逆に既存のクラス