[レベル: 中級] この記事では、Wordpress 5.5 に標準実装されたサイトマップ生成機能を無効化する方法を紹介します。 WordPress のコア XML サイトマップ機能 リリースされたばかりの WordPress 5.5（この記事を公開している時点での最新バージョン）は、検索エンジン向けの XML サイトマップを作成する機能をコア機能として標準実装しました。 これまでサイトマップ生成にはプラグインを利用していました。 コア サイトマップは WordPress をインストールしたディレクトリの直下に作られます。 ファイル名は wp-sitemap.xml です。 example.com に WordPress をインストールしていたらサイトマップの場所は example.com/wp-sitemap.xml になります。 アクセスしたサイトマップはこんな感じです（正確には、サイ

[レベル: 中級] ネイティブ Lazy-load を WordPress 5.5 が標準機能として実装します。 <img> タグに loading=”lazy” を自動追加 width 属性と height 属性を追加してある <img> タグには loading="lazy" が記事出力時に自動的に挿入されます。 記事作成者（＝あなた）は何もする必要はありません。 WordPress 側のバックグラウンド処理によりネイティブ Lazy-load が実装され、画像の遅延読み込みが実現します。 もちろん、過去に投稿した記事にも適用されます。 CLS を防ぐために width/height が必要 loading="lazy" を WordPress が追加する画像 (<img> タグ) には width 属性と height 属性が存在していなければなりません。 理由は CLS を防ぐため

こんにちは、koyaです。 在宅勤務で自宅PCでAdobe製品を開きながら作業することが多くなり、メモリが足りなくなってしまったので16GBから48GBにアップグレードしました。めちゃくちゃ快適です。 最近はChromeだけでもメモリをたくさん使ってしまうので16GBだと足りなくなってしまいましたね… 今回はブロックエディタに独自のブロックを追加する事が出来る「Block Lab」を紹介します。 インストール プラグインの追加から検索、または以下のサイトからダウンロードしてインストールします。 wordpress.org 公式サイト 使用方法 インストールをするとサイドバーの一番下に「Block Lab」が追加されるので、ここからメニューを開くことが出来ます。 All Blocksを開くとデフォルトで「Example Block」が下書き状態で追加されています。 「Example Bloc

WordPressの便利な機能の1つが、カスタム投稿タイプです。これによって、1つのサイトの中で複数のタイプの投稿を管理することができます。 ただ、設定項目が少し多く、パーマリンクの設定なども少し複雑になってしまっています。 今回は、カスタム投稿タイプの使い方や、パーマリンクのカスタマイズ方法などを分かりやすくご紹介していきます。 【2024年最新】WordPressの使い方を徹底解説！初心者向けのおすすめ設定も WordPressは初心者でも簡単にWebサイトを作ることができる人気のソフトウェアです。 しかし、機能がやや複雑で初めてWordPressに挑戦する人には導入時のハードルがやや高く、どのように設定す... Web Design Trends カスタム投稿タイプとは カスタム投稿タイプとは、通常の「投稿」とは別に、投稿のタイプを作ることができる機能です。 例えば、コーポレートサイ

前回まででブロックをいくつか作ってみたのだが、今回は情報の保存先という点について詳しく触れてみたい。 HTMLの属性・中身に情報を保存する インタラクティブなHTML要素というのはそれほど多くない。テーマと管理画面で同じinput要素を表示する必要性はほぼないだろうが、ブロックの情報保存先としてわかりやすいので、まずこれから触れてみよう。 inputというブロックを用意し、inputタグをテーマ側にそのまま表示することとしよう。とりあえずブロックcapital-block-inputをPHPで登録し…… // Register block. add_action( 'init', function() { // Register JS wp_register_script( 'capital-block-input', CAPITAL_BLOCK_ASSET_URL . 'assets/j

カスタムブロックを作成するには”registerBlockType”を使ってブロックを登録するのですが、第二引数のオブジェクト内で設定するattributesオプション、少しややこしいですよね。 という訳でメモ書きです。 どのような場合にattributes設定が必要になるのか まずはattributes設定はオプショナルなのですが、どのような場合に必要になるのでしょうか？ 単に静的なデータを出力するだけの場合は不要なのですが、例えばリッチテキスト等の編集可能なブロックにする場合はブロック内のテキストデータを保持するためにattributesの定義が必要になります。 下記はリッチテキストを使用したシンプルなカスタムブロックの登録のコード例です。 （attributesの部分はひとまず、良くない例です。） リッチテキストブロックの登録例　※JavaScriptファイルです const { R

本記事は WordPress Advent Calendar の15日目です。12月の初め頃はいくつか空きがありましたが、無事全部埋まって良かったです！ 本記事では、Gutenbergで実用的なCustom Block Type（独自のブロック型）を作るための第一歩として、Gutenbergにおける3つのレンダリングについて紹介します。 なお、本記事のサンプルコードは下記リポジトリで公開しています。 https://github.com/ryo-utsunomiya/my-gutenberg-ext 静的ブロックと動的ブロック Gutenbergのブロックには、二つの種類があります。 一つは「静的ブロック(Static Block)」で、これはエディタで保存した際にコンテンツが決まります。通常の記事データはこちらです。 もう一つが「動的ブロック(Dynamic Block)」です。これはサ

検索キーワードが指定されていません。最近の項目を表示しています。 検索もしくは上下矢印キーを使って項目を選択してください。

WordPressの新エディタ「Gutenberg」徹底ガイド（2024年版） 2018年12月にWordPressのブロックエディタ「Gutenberg」が発表されたとき、これをどう期待すれば良いのかがわかりませんでした。確かに、ベータ版で遊ぶ時間は十分にありました。しかし、実際の立ち上げがどれくらいスムーズに進むのか、ユーザーや開発者がどれくらい新しいエディタを受け入れるのかは予測できませんでした。 今回の記事を最初に公開してから2年以上が経過し、Gutenbergエディタは大きな成長を遂げました。MVP（Minimum Viable Product、実用最小限の製品）としての発表から、より成熟したプロジェクトへと進化し、今や、最終的な目標「WordPressのための統一されたフルサイト編集体験を実現する」に近づきつつあります。 この最近の変化を受け、今回の記事ではGutenbergエ

説明 This plugin provides the option to add new statuses to the backend and define the system relevant status settings. You can add/edit statuses just as categories or tags. All statuses are available for all your post types. You will find a new menu item located in the settings admin menu. For the sake of understanding, this plugin minimally changes messages, translations and workflow in Gutenberg

ブログの構築システムとして、またはサイトのCMSとしても多大なシェアを誇るWordpressでは、記事投稿時にURLを貼り付けるだけで記事本文中へリンクボックスなどを設置できる「埋め込み」という機能があります。 この埋め込みを使って設置されたリンクボックスは、URLの提供元が用意したリッチな見た目のものが掲載されることになります。 「埋め込み」に対応したURLだと、貼り付けるだけでブログカード的なものを設置できます。 この埋め込みでリンクボックスを設置するには、上図で挙げたTwitterのように埋め込もうとしたURLが対応している必要があります。 Wordpressの「埋め込み」にサイトを対応させたいのであれば、サイトがそもそも（古くない）WordPressで構築されていれば、デフォルトで記事ページなどの埋め込み対応は有効化されています。また、テーマのカスタマイズなどで無効化している場合で

様々な情報を一括でモニタリングできる WordPress 用プラグインがあります。 それは「Query Monitor」です。 そのインストール手順から日本語化・使い方と設定などを解説していきます。 Query Monitor は、様々な情報を一括でモニタリングできます。 基本的には管理者権限を持っているユーザーのみが参照できますが、 非ログイン時もしくは非管理者としてログイン時にも、 Query Monitor が出力した情報を表示できる方法があります。 取得できる情報は、主に以下のようなものがあります。 データベースクエリフックに関する情報現在のリクエスト中のテーマに関する情報PHP エラー（警告、通知、非推奨など）現在のリクエストのクエリ変数一致したすべてのリライトルールと関連するクエリ文字列スクリプトとスタイル言語設定とテキストドメイン各テキストドメインの MO ファイルとロードの

静的サイトジェネレーターとは？ Static Site Generator（SSG） WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだった それに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成する さらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている 静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合 レスポンスが速い。サーバーでHTMLを動的に生成しないから サーバー代 ¥0✨ サーバーが必要ないため サーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり

犬好きでイヌアレルギーの kagata です、というのは前回記事からの質問に答えるために書いています。 今回は、WordPress のカスタマイズで PHP の「名前空間が汚れる」のをどうにかして避けようとやってみたことをご紹介します。まねするかどうかは読者諸賢のご判断にお任せいたします。 名前空間が汚れる、とは ここでいう「名前空間が汚れる」とは、次のような状況を指します。 関数名で汚れる WordPress のカスタマイズである一定以上の込み入ったことをしようとすると、 add_action() や add_filter() に出会います。アクションフックやフィルターフックですね。 これらを使った具体的なカスタマイズ例はいたるところで見られます。例えば、WordPress Codex 日本語版の add_action() の項には次のようなサンプルコードがのっています。 functio

文責 はじめに 『KIWAMINO』をどうやって構築したのか WordPress と AMP プラグインで Canonical AMP サイトを構成した方法 インフラ ミドルウェア WordPress Lighthouse なぜ WordPress と AMP プラグインで Canonical AMP サイトを構成したのか (1) AMP の制約によって、サイトスピードが速くなるから (2) エンジニア・デザイナーの学習および開発コストが低いから (3) 巨大な組織・コミュニティの恩恵を受けられるから おわりに 採用情報 文責 新規プロダクト開発部の伊勢（ id:hayatoise ）です。 新規プロダクト開発部は一休の新規事業の開発とデザインを担当する部署です。現在、新規プロダクト開発部は主に『一休.comスパ』、『一休コンシェルジュ』および『KIWAMINO』を担当しています。 はじめ

[レベル: 中級] サイトマップを生成する機能を WordPress のデフォルトの機能として実装するプロジェクトが始まりました。 WordPress のコアにサイトマップを組み込む 現状では、サイトマップを作成する機能は WordPress の標準機能としては備わっていません。 サイトマップ生成にはプラグインをインストールするかツールを自作します。 WordPress の人気プラグインの上位 15 個のうち、実に 4 個がサイトマップ生成の機能を提供しているとのことです。 WordPress ユーザーがサイトマップを必要としている証明です。 SEO においてもサイトマップは今や必須と言っていいでしょう。 ウェブで最も使われている CMS である WordPress で構築されたサイトの多くが SEO にも取り組んでいるはずです。 こういった経緯もあり、WordPress のコア機能として

Wordpressのメディアアップロード時に、タイトルだけではなく代替テキストにもファイル名を入れる方法PHPWordPress add_filter( 'wp_prepare_attachment_for_js', 'update_prepared_attachment_response' ); function update_prepared_attachment_response( $response, $attachment, $meta ) { if (empty($response['alt'])) $response['alt'] = $response['title']; return $response; }

WordPress 4.7アップデートにより、代替テキスト(alt属性)の扱いが変更されています。 これまでは「メディアを追加」から画像を挿入すると、画像タイトルやキャプションの内容が自動で代替テキストに入力されていましたが、アップデート後はalt=””のように空になリます。 変更理由はアクセシビリティ向上のため。スクリーンリーダー機能によりPC操作補助を利用してようなケースでは意味のない画像タイトルが代替テキストに自動挿入されると迷惑ですからね。 フィルターフックを使って、次のようにfunctions.phpに追記すれば、これまでのように画像タイトルを代替テキストに自動挿入できますが、 function my_auto_alt($response, $attachment, $meta) { if (empty($response['alt'])) $response['alt'] =