IDから画像を取得して表示最初はカスタムフィールドの値をそのままテキストとして投稿本文末尾に表示していましたが、そこを変更します。 カスタムフィールドの値をIDとして画像を取得し、imgタグで表示します。 // 投稿内容の末尾にカスタムフィールドの内容を追加 add_filter('the_content', 'add_imagefield_content', 1); function add_imagefield_content($content) { $id = get_post_meta(get_the_ID(), 'imagefield', true); if ($image = wp_get_attachment_image($id, 'large')) { $content .= '<h2>Imagefield</h2>'; $content .= $image; } retu

WordPressでカテゴリデータに追加のデータフィールドを与えたい場合があります。 この記事ではカテゴリデータにカスタムフィールドを追加する方法とサンプルコードを紹介しています。 カテゴリデータでカスタムフィールドを利用する方法カテゴリデータでカスタムフィールドを利用する方法を以下の手順にて紹介します。 カテゴリ追加ページと編集ページにフォーム入力欄を追加する追加したフォームの情報をカスタムフィールドに保存する作成したカスタムフィールドのデータを呼び出して利用するカテゴリ追加ページと編集ページにフォーム入力欄を追加するカテゴリ追加ページと編集ページに独自のフォーム入力欄を追加します。 カテゴリのデータにカスタムフィールドを追加するには{$taxonomy}_add_form_fields()フックと{$taxonomy}_edit_form_fields()を使います。 edit_cat

WordPressの投稿でカテゴリーにチェックを入れて保存すると、チェックを入れたカテゴリーが上にきます。 チェックを入れて保存した後も、カテゴリーの順番を維持する方法を調べました。 サンプルコード 投稿の保存前の状態です。 3番目のカテゴリーCにチェックを入れて保存してみます。 保存後はチェックしたカテゴリーCが一番上にくるようになりました。 保存後も順番を維持する場合、functions.phpに以下のように記述します。 functions.php function keep_admin_posts_category_order( $args, $post_id = null ) { $args['checked_ontop'] = false; return $args; } add_action( 'wp_terms_checklist_args', 'keep_admin_pos

WordPressテーマを自作・カスタマイズする時に、よく管理画面にオリジナルのメニュー画面を設けたい時があるかと思います。 たとえば、サイトの使い方を管理画面に記載したかったり、サイト全体の設定を管理画面で分かりやすく一括管理したい場合などにオリジナルメニューを設けます。 今回はそんなオリジナルメニュー画面の作り方について見ていきたいと思います。 WordPress管理画面に独自のメニューを作る参考：管理メニューの追加 – WordPress Codex WordPressの管理画面に以下のようなオリジナルのメニュー画面を作っていきます。 メニュー作成は、トップレベルメニューと、サブレベルメニューがあります。 上の大見出しが、親となるトップレベルメニュー、その下がサブレベルメニューになります。 「add_menu_page」「add_submenu_page」を使用して制作します。 トッ

【WordPress】管理画面で、タクソノミーやカスタムフィールドの列を追加する（ソート機能付き） 更新日：2017/02/27 WordPressのカスタマイズをしていて、管理画面の投稿一覧の使い勝手も向上させたい！と思う時ってありますよね。 ポイントとなる項目を一覧で見ることができるだけで、かなり管理画面が便利になりますが、それにソート機能や絞り込み機能をつけることができると、なお良いですよね。 そこでこの記事ではWordPressの管理画面をより便利にするタクソノミーやカスタムフィールドの列を追加する方法について、基本の書き方の説明と、実装例を記載しています。 【例】タクソノミーを投稿一覧に表示して、絞り込み機能をつける 【例】カスタムフィールドを投稿一覧に表示して、ソート機能をつける 【例】IDをタクソノミー一覧に表示して、ソート機能をつける 基本の書き方まず、管理画面の投稿一覧ま

OSX El Capitan docker Version 1.13.1 Docker for Macをインストールする DockerをMacにインストールする wordpress用のディレクトリを作る 好きな名前のディレクトリを作る $ mkdir { my-wordpress-dir-name } ディレクトリに移動する $ cd { my-wordpress-dir-name } version: '2' services: db: image: mysql:5.7 volumes: - db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: wordpress MYSQL_DATABASE: wordpress MYSQL_USER: wordpress MYSQL_PASSWORD: wor

はじめに Gutenberg（ブロックエディタ）対応のテーマを作成するために、CSSを設計しようと思ったのですが、 読み込まれるCSSの数が多い どのように読み込む/読み込まれるのか フロント側、エディタ側どちらで読み込まれるのか などこんがらがるポイントが多かったので、まとめてみました。 style.min.css {wp_dir}/wp-includes/css/dist/block-library/style.min.css Github：WordPress/wp-includes/css/dist/block-library/style.css フロント側で自動的に読み込まれる最初のCSS。 各ブロックの基本的なレイアウトを定義しており、特にブロックエディタ用のCSSを用意していなくても、ある程度いい感じに表示してくれるのはこのCSSのおかげ。 以下のように、wp_dequeue_

Extending Gutenberg Core Blocks with Custom Attributes and Controls Extensibility is one of WordPress features that I love the most. From custom filters to actions, now they are applying the same thing with the new Gutenberg Editor. It’s pretty great but aside from the WordPress handbook, there are only few tutorials available for Gutenberg development as of the moment. This is the main reason I’v

Gutenberg（ブロックエディタ）の開発において Slot と Fill の理解は重要です。 RichTextToolbarButton で追加したものがリッチテキストのツールバーに表示されるInspectorControls で追加したものがサイドバーに表示されるBlockControls で追加したものがブロック用のツールバーに表示される これらはすべて Slot と Fill で実現されています。 仕組み React の createContext を利用して実装されています。 上のハンドブックの例のように Slot と同じ name で Fill を作成すると 、Slot に Fill の要素が表示されます。 Gutenbergにはあらかじめいくつかの Slot が埋め込まれているため、 Fill を使用することでその場所にコンポーネントを追加することが可能です。 ただし Fi

こんにちは！3児のパパエンジニアの笹垣です。 以前こちらでWordPressのGutenbergブロック開発についてご紹介しましたが、その後実案件でカスタムブロックを使う機会があり、ブロック開発に加え、カスタム設定機能も追加したので合わせてご紹介します。 先日リリースしたARCHETYP Staffingのメディアサイト「ARCHETYP Staffing Magazine」では、インハウス・フリーランス・制作会社で働くクリエイターやエンジニア、企業のクリエイティブに対する思いなどをインタビューや対談形式で発信していますが、その記事で利用する会話モジュールが欲しいという要望から開発に至りました。 はじめに まずはじめに会話モジュールのカスタムブロックを作成します。 ※カスタムブロックの開発を行う上で必要な知識や環境についてはこちらを御覧ください。 会話ブロックの追加 前回の定義リスト（dl

WordPressのGutenbergで選択しているテキストに色（クラス）を付ける Gutenbergはブロック単位ではカラー設定ができますが、選択したテキストだけのカラー設定ができません。 そこでカスタムブロックでテキストカラーの変更をできるようにしてみます。 投稿日2019年02月20日 更新日2019年02月20日 テキストカラーを変更する方法は「Advanced Rich Text Tools for Gutenberg」というプラグインでできます。 ただ、これはインラインスタイルで設定されてしまうので、メンテナンス性が悪いかなと思います。 ということでこのプラグインをベースにして、設定したカラーのクラスを割り当てるように変更してみます。 Advanced Rich Text Tools for Gutenberg カラーパレットの設定 Gutenbergには色を選択するカラーパレ

Posted: 2019.03.12 / Category: WordPress / Tag: Gutenberg Gutenbergはサイドバーに「高度な設定」というクラス名を入力できる欄があるのですが、これだとクラス名を覚えていなくてはいけなくて、制作者以外の人に入力してもらうのが難しいですよね。 ということで今回はサイドバーに設定項目を追加してボタンでクラスの切り替えをできるようにしてみます。 動作環境 WordPress 5.1 Create Guten Block Create Guten Blockの導入は下記も参考にしてください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 完成イメージ 段落のマージンをボタンで切り替えて調節できるようにしてみます。 コンポーネントの読み込み 最初に必要なコンポーネントを読み込みます。 blo