最近の日本のWordpressテーマだと目次を独自実装しているものが結構多いと思います。 海外テーマだと目次の機能を独自で持っているテーマは見かけたことがありません。 なぜ、テーマで目次の機能を持たないのかと言えば、プラグインで賄える機能であればそれを使ってもらい、それで問題が起きないようなテーマにしておけば無駄がないというスタンスです。 みんなで同じことをしても仕方ないですし、選択の自由を与えるという観点でこれは正しいと思っています。 日本のように何でも取り込んで自前で頑張ろうというのは、ユーザーを取り込むための製作者のエゴで最終的にユーザーにリスクを押し付けているだけです。このようにして日本はガラパゴス化が進みます。 上記はブロックエディタの独自ブロックを組み込んでいる日本のテーマについても当てはまります。独自ブロックを使った記事はテーマを変更したとたんに使えなくなり、表示できません。

お世話になります。 カスタム投稿(Custom Post Type UI)でデフォルトのタイトルを表示しないように設定し、 カスタムフィールド(Advanced Custom Fields)を使い項目を入力して公開した場合、 デフォルトのタイトルが非表示で空欄なので、投稿一覧ページにはタイトルが「自動下書き」になっている状況です。 これを、カスタムフィールドで作成したタイトル項目を投稿一覧ページのタイトルに設定したいです。 どなたか、コードのご教授願います。 通常タイトルが空白の場合はフロントエンドでは空白になり、管理画面上でも「自動下書き」ではなく「タイトルなし」になりますが、save_postなどの使い方によっては「自動下書き」になる場合もあるので、どこかの記述方法に問題があると思います。 とりあえずは、これでどうでしょう？ヘッダーのタイトルタグは適当に直してください。 functio

『グーテンベルク時代のWordPressノート テーマの作り方 2（ランディングページ＆ワンカラムサイト編）』ではJavaScriptファイルを用意してブロックスタイルを追加する方法を紹介しましたが、最新のGutenberg（バージョン6.2）ではPHPだけでも簡単に追加できるようになりました。 たとえば、functions.phpに次のように register_block_style() の設定を追加すると、見出しブロックに「デザイン01」と「デザイン02」の２つのブロックスタイルが追加され、見出しのデザインを切り替えることができるようになります。 register_block_style( 'core/heading', array( 'name' => 'design01', 'label' => 'デザイン01', 'inline_style' => '.is-style-desi

完成したコード「実現したいこと」を踏まえた上で完成したコードがこちらです。 /*! * Copyright (c) 2020 kusamura * https://web.monogusa-note.com/ * Released under the GPL license. * see http://www.gnu.org/licenses/gpl-2.0.html * * 参考: https://www.webopixel.net/wordpress/1499.html */ //コンポーネントの読み込み const { Fragment } = wp.element; const { addFilter } = wp.hooks; const { PanelBody, SelectControl } = wp.components; const { InspectorControls

2015.07.26 投稿 やることが多いのでコードベースで淡々とその方法を書きます。今回の要件は以下を想定 TinyMCE ビジュアルエディタに「テキストボックスを吐き出す」ボタンを追加 ボタンを押すとダイアログが開く ダイアログはこんな感じ バージョン WordPress 4.2.3 functions.php の編集 TinyMCE にオリジナルのボタンを追加するにあたっては、(WordPressではなく)TinyMCE のプラグインを作成する必要があるようです。ちなみにプラグインは js で作ります。 プラグインを WordPress に対応させるにあたってまずは、add_filter 'mce_buttons' でボタンを追加。add_filter 'mce_external_plugins' でプラグインとなる js を登録することになります。 <?php function r

Welcome to the WordPress Theme Developer Handbook, your resource for learning all about the exciting world of WordPress themes. The Theme Developer Handbook is a repository for all things WordPress themes. Whether you’re new to WordPress themes, or you’re an experienced theme developer, you should be able to find the answer to many of your theme-related questions right here. In this handbook, you

はい、ごめんください。実行委員長の小杉です。 WordCamp Niigata 2019 に当日参加したけど見れなかった方、当日参加できなかった方、お待たせしました！セッション動画を公開しましたので、お知らせいたします。 WordCamp はセッションの動画を撮影して、WordPress.tv というところに公開しています。今年の4月に開催された WordCamp Haneda や、先日開催された WordCamp Tokyo の動画も随時アップされていきます。 もちろん、これらをやるのも有志なのですが、新潟の動画は副実行委員長の杉山さんががんばってくれたので、SNSでは数日後にアップされていました。見たという方もいらっしゃるのではないでしょうか。 オープニングムービーもカッコいいので、ぜひご覧ください。 以下の登壇者一覧と詳細はこちらのページをご覧ください。気になった登壇者の方の SNS

画像をアップロードするカスタムフィールドついて詳しく説明します。 以下で説明しているファイルのカスタムフィールドは、ソースコードの生成はカスタムフィールドメーカーで簡単に作成できます。 画像をアップロードするカスタムフィールドの作成 例）PNGファイルをアップロードするカスタムフィールド（フィールド名：topVisual） <!-- アップロード済みのファイルのプレビューエリア --> <!-- BEGIN topVisual@path:veil --> <img src="%{ARCHIVES_DIR}{topVisual@path}" width="{topVisual@x}" height="{topVisual@y}" alt="{topVisual@alt}" /><br /> <input type="hidden" name="topVisual@old" value="{t

ショートコードを利用することでテンプレートやちょっとした機能を簡単に呼び出すことができるようになりますが、それをより簡単に扱えるようにするためにエディタにショートコードを挿入するボタンを追加する方法を紹介します。 ショートコードを作成 まずは使用するショートコードを作成していきます。 ここでは例として<div class="example"></div>を出力するというもので、functions.phpに下記を記述します。 function example_shortcode( $atts, $content = null ) { return '<div class="example">' . $content . '</div>'; } add_shortcode( 'example', 'example_shortcode' ); 上記ショートコードを登録すると、例えば[exampl

WordPressで現在有効化されているプラグインを一覧表示し、さらにそれらがどのような順番で読み込まれているか確認する方法です。 有効化されているかどうかは管理画面で十分わかりますが、フックが効かないなどなにか問題が起きたときに読み込み順が原因なのか確認したい場面などで地味に便利です。 確認は単純にget_option( 'active_plugins' );をvar_dumpで出力するだけで、下記を出力させたい箇所に記述します。

この記事は古いです。 下記など公式ドキュメントを参照ください。 https://developer.wordpress.org/block-editor/ #自己紹介 石川栄和 @kurudrive 株式会社ベクトル 代表取締役 / フロントエンドエンジニア 好きなもの : スケボー / スプラトゥーン2 ■ こんなの作ってます WordPressテーマ「Lightning」 WordPressテーマ「BizVektor」 見積書・請求書管理用WordPressテーマ 「BillVektor」 お城めぐりGPSスタンプラリー戦国攻城記 スケボーブログ 今日の内容 Gutenbergとは？ Gutenbergの特徴 Web制作者が最低限抑えておきたいポイント はじめてのブロック開発 とりあえず作ってみる 任意のclassをつける 編集可能にする ツールバーをつける 画像とテキストのブロック

WordPressで「ホームページの表示」設定で最新の投稿・固定ページを指定した時のトップページの挙動の違いまとめ。 2019 8/31 WordPressの管理メニュー設定項目の中に「ホームページの表示」という設定がありますよね。 サイトのトップページに関する重要な設定ですが、これによってどこがどう変わるのか、皆さんちゃんと把握していますか？ （ちなみに「ホームページの表示」設定とは、以下のエリアで設定できる項目のことです。） 「ホームページの表示」設定エリア おそらく、皆さん見かけたことはあると思います。 WordPressでサイトを制作する人なら「ホームページ」に固定ページを指定する時にここで設定することもよくあるでしょう。 ですが、詳しいことはあまり知らないまま放置してるんじゃないでしょうか...？ 私もその１人だったのですが、今回はこの「ホームページの表示」設定で 「最新の投稿」

Cocoonテーマカスタマイズ範囲内で作業します。主にコピペで作業できます。StripeのプラグインはDirectStripeを使用します。WordpressやStripe初心者の方にもなるべく分かりやすく説明します。 今回どんなタイトルにするか迷いました。 Wordpressで会員制サイトを作る方法（コピペでOK） Cocoonでプラグインを使わずに会員制サイトを作る方法 Stripe定期購読の会員制サイトを作る方法 どれも正解です。 会員制サイト概要 完成図 本家「脱サラして中国で一発当てるブログ」と同じ仕組みのサイトができます。 https://h200tx.com/about/start-member-content2 https://h200tx.com/register 機能的には↑に書いてある通りです。 会員制サイトの特徴 上記では触れていませんが、以下のような工夫があります

今回は、WordPressでメディアにアップロードした画像のURLから、画像ID（メディアID）を取得する方法をメモ。 例えば、テーマカスタマイザーで画像をアップロードして設定できるようにしている場合、その画像のデータはURLの文字列情報として保存されていますが、（基本的な手法で画像を設定できるようにしている場合） カスタマイザーで設定された画像のサムネイルサイズ版を取得して、画像を遅延読み込みさせる時のプレースホルダーとして設置したいケースなどでは、URL情報を元に画像IDを取得する必要がでてきます。 ちょうどそのケースに遭遇したので少し調べてみると、attachment_url_to_postid()というめちゃくちゃ便利な関数が用意されていることを知りました。 使い方は簡単で、引数に画像のURLを指定するだけ。（メディアへアップロードされている画像のURL） 例 $url = 'ht

WordPress 5.0から導入されたブロックエディター(Gutenberg)のカスタマイズ方法や、関連するオプション、新しく導入された設定について見ていきます。オフィシャルの テーマサポート の内容をベースに、独自の情報を追加しています。 更新履歴 2021/06/11 - ブロックフォントサイズの shortName が無くなったので削除。ブロックパターンの削除、カスタム単位、カスタム行間について追加。 2021/01/10 - グラデーション設定を追加。 2020/06/19 - 投稿タイプ別に使えるブロックを制限する方法を追加。 2020/05/24 - ブロックスタイルの削除について追加。 2020/04/22 - 後方互換性についての注意を追加。ダークモードの記載追加。 2020/02/20 - Gutenberg 7.5 でインラインの文字色編集が追加されたので記載。 20