【WordPress】テーマカスタマイザーを作成する｜notes by SHARESL
テーマカスタマイザーとは WordPressの管理画面でプレビューしながらコンテンツを編集・更新・公開できる機能です。 テキストなどを入力エリアに打ち込むとリアルタイムでプレビューが更新されるので直感的でわかりやすく、初心者でも簡単に修正・更新ができます。 具体的にはWordPressの管理画面に入って「外観 → カスタマイズ」で表示される画面のことです。 何も設定していないとうまく使えませんが、対応しているテーマの場合はここからコンテンツを変更できます。 WordPressの受託案件で何度か使うことがあり、自作することが多くなったので使った方法やコードを一度まとめてメモとして残しておきたいと思います。 公式では「テーマカスタマイズAPI」としてcodexに情報が掲載されています。 テーマカスタマイズAPI https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC
カスタマイザーのカスタマイズ方法！自由度の高いテーマ作りができるようになります | HPcode（えいちぴーこーど）
カスタマイザーに項目を追加する方法 早速カスタマイザーに項目を追加していきましょう。完全にオリジナルな自分の項目を追加する想定で作っていきます。 公式はこちら → テーマカスタマイズ API – WordPress Codex 日本語版 まずはfunctions.phpに以下のようなコードを書いてあげてください。 （全部を丸々コピーでOKです） function my_customize( $wp_customize ) { $wp_customize->add_panel( 'my_panel', array( 'title' => 'パネル名', 'priority' => 1, ) ); $wp_customize->add_section( 'my_section', array( 'title' => 'セクション名', 'panel' => 'my_panel', 'prior
Advanced Custom Fields Proを用いたGutenbergのブロック開発 - Qiita
Gutenbergが嫌われている件について WordPress5.0にてGutenbergが搭載されてから早4年が経ちました。 今ではGutenbergをフル活用した「フルサイトエディター (FSE)」なるものが実装されつつあり、もはやWordPressを使用する人にとって、Gutenbergの理解は必須です。 しかし、、、世の中はGutenbergが嫌いな人が多い印象を抱きます Gutenberg内の機能開発が活発であり、運用の工数がかかる クラス名が勝手に割り振られてしまい、CSSでの制御が難しい アップデートによりブロックの見た目が崩れることがある Classic Editorよりも、投稿画面のカスタマイズがしにくい カスタムフィールドを設置しても、場所が見にくい（ページ下部とサイドバーにしか出せない）ので編集しにくい などが主に嫌われる理由だと思います。 ※余談ですが、フルサイトエ
【超簡単】WPでブロックエディタを自作できる、ACFとは？手順も解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！「御徒町」を「つれづれまち」と読んでいたバックエンドエンジニアのまうみです。 今回はみんな大好きなWordPressプラグイン「Advanced Custom Fields PRO」（以下、ACFと省略）を使った、自作ブロックエディタの設定方法を紹介したいと思います。 ブロックエディタを自作する方法はいくつかあります。しかし、Reactの知識やjsをbuildするための環境構築が必要ですし、WordPressの実装経験がある方でも、ハードルが高い印象を受けるかもしれません。 また、WordPress本体のアップデートに合わせてメンテナンスをしていく必要もあります。いくらブロックエディタ自体の利便性が良くても、制作やメンテナンスにコストがかかるのは極力避けたいですよね。 そういったハードルをACFを使用することで解決し、簡易的にブロックエディタを開発することが可能です。ゼロからブ
ブロックパターンの作り方
以下は、Beatriz Fialho が書いた WordPress.org 公式ブログの記事「So you want to make block patterns?」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 テーマやプラグインなど、WordPress のブロックエディターで何かを作ったことがある人は、ブロックパターンについても聞いたことがあるかもしれません。 WordPress に同梱されているパターンを眺めていて、これについて短い記事を書くのも良いかなと思いました。パターンは知っているととても便利なショートカットなのですが、一体何なのかとか、使う場面を知らない方も多いと思います。 ブロックパターンとは パターンはあらかじめ配置されたブロックの集まりで、多様に組み合わせたり配置を変えることができるので、美しいコンテンツをもっと簡単に作れるようになりま
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法 - by Takumi Hirashima
WordPress メディアのアップロードから画像が自動生成されなかった時の対処方法を紹介します。 画像の自動生成を確認 GDライブラリーの確認方法 画像の自動生成を確認 まずは FTP でサーバーにアクセスして、メディアのアップロードで画像がアップロードされているかを確認。 そこで、サムネイルや他のサイズの画像が自動生成されているかどうかを確認します。 画像が自動生成されていない場合、PHP のGDライブラリー（画像ライブラリー）がインストールされていない可能性があります。 GDライブラリーの確認方法 GDライブラリーが環境にインストールされているかを確認するには、現在表示中のページのテンプレートに以下のコードを追加します。 <?php phpinfo(); ?> phpinfo() は現在の PHP の設定を確認することができます。 コードが正しく動くと、PHP の設定が表示されるので
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」ー後編 | バシャログ。
こんにちは、koyaです。 今回は前回の続きを書きます。 前回のおさらい 前回はプラグインでブロックのフィールドを作成するところまでをやりました。 上の画像のようにブロックエディタ上のフィールドに値を入力して、いざブロックに反映しようとすると画像のようなエラーが出た状態になっている状態で終わりました。 ブロックエディタでのエラーの解消 上記のエラー文では「Block rendered as empty.block-lab-editor__ssr」と表示されています。 ブロックをレンダリングしようとしましたが中身が空でした。と言われていますね。 プラグイン入力した状態では入力画面は作りましたが、ブロックの中身やデザインは設定されていない状態です。 これを解消するためにブロックの中身を作成していきます。 ブロックはテーマディレクトリの下にblocksディレクトリを作成し、その中にブロックごとに
【WordPress】カスタムタクソノミーを親なしのチェックボックスで追加する | バシャログ。
こんにちはfujiharaです。自宅のwifi環境に中継機を導入したら ネットワーク環境が劇的に変化してマジすげぇと感動しています。 今回はカスタムタクソノミーを追加したときに、管理画面で親なし・チェックボックスにする 方法をご紹介します。 方法 カスタムタクソノミーを通常追加するときには以下のコードで 実現すると思います。(詳細オプションは省いて、無名関数で実装しています) add_action( 'init', function () { register_taxonomy( 'bashalog', 'post', [ 'label' => 'バシャログ', ] ); } ); 上記で追加されると以下のようになります。テキストフィールドで追加していく方法 まずはこれをチェックボックスにします。meta_box_cb に post_categories_meta_boxを指定 add_a
Gutenberg（グーテンベルグ）エディターでブロックの項目を非表示にするよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近七味より一味派なのがわかり、七味の黒い丸いやつが丸々入ってると歯が痛くなって毎回イラっとするアラサーのハルです。 今回はWordPressのGutenberg（グーテンベルグ）のエディターでデフォルトブロックの表示を制御する方法をまとめたいと思います。 グーテンベルグはデフォルトでたくさんのブロックが用意されている グーテンベルグエディターは、初期状態でたくさんのブロックが用意されています。 この記事を書いた時点（2020年1月）だと、 一般ブロック フォーマット レイアウト要素 ウィジェット 埋め込み の分類があり、それぞれに多くのブロックが用意されています。 プロジェクトによってはすべてを表示する必要はなく、ブロックの項目が邪魔になる場合もあります。 今回は、ホワイトリストで管理して、使うものだけ表示する方法が簡単だったので紹介したいと思います。 ホワイトリストで指定するソースコー
WordPress でユーザー別に管理画面の項目を非表示にする方法 - by Takumi Hirashima
WordPress でユーザー別に管理画面サイドバーメニューの項目を非表示にする方法を紹介します。 例えば、納品時にユーザー別に表示項目を分けたい時に便利な方法です。 ユーザー別にサイドバーメニューの項目を非表示にする方法 複数のユーザーでサイドバーメニューの項目を非表示にする方法 ユーザー別にサイドバーメニューの項目を非表示にする方法 例えば、特定のユーザー（ID:3）が管理画面へアクセスした時。 メディアや固定ページのサイドバーメニューを非表示にしたい場合は、次のコードを function.php に追加します。 /*【管理画面】ユーザー別にサイドバーメニューの表示をカスタマイズする */ function remove_menus_user(){ global $current_user; wp_get_current_user(); if ($current_user->ID ==
WordPress で最大アップロードサイズを変更する方法 - by Takumi Hirashima
WordPress で最大アップロードサイズを変更する方法を紹介します。 例えば、2MBを超えるファイルをアップしたい時に便利な方法です。 functions.php に変更を加える方法 php.ini に変更を加える方法 サーバーの設定を確認 WordPress 側で最大アップロードサイズの変更を試す前に、まずはサーバーの設定を確認してください。 XSERVER やロリポップなどの主要なサーバーでは、サーバーの管理画面でファイルのアップロードサイズを管理している場合があります。 functions.php に変更を加える方法 WordPress でファイルの最大アップロードサイズを変更する方法を紹介します。 例えば、アップロードサイズを 5MB まで引き上げたい場合は、次のコードを functions.php に追加します。 /* WordPressで最大アップロードサイズを変更する
WordPressのテーマカスタマイザーでラジオボタンを使う方法
今の状態で「外観」→「カスタマイズ」を開いて頂くと、「レイアウト」という項目が追加されているのが分かると思います。 「レイアウト」という項目を選んでも、今は中身はない状態です。 それでは、これからその中身を追加していきたいと思います。 サニタイズ関数を設定する 「レイアウト」項目に中身を作っていく下準備として、まずはラジオボタンを使うためのサニタイズ関数を設定します。 サニタイズとは？ サニタイズとは入力された値を無害化することで、たとえばテーマカスタマイザーのテキスト入力欄にhtmlやPHPのソースを入力された場合に、それらの文字列をそのままWordPressテーマに反映してしまうと表示が崩れたり、予期せぬ事故が起きてしまいます。 テーマカスタマイザーを使用する人が悪意を持ってそういったソースを入力することはないとは思いますが、それでもミスなどによってウェブサイトに悪影響を及ぼす内容を入
WordPressの投稿画面で入れ子になったカテゴリ選択ボックスの階層を保つ方法 | それからデザイン スタッフブログ
WordPressで記事を投稿するとき、入れ子になったカテゴリにチェックをして保存をすると、 選択されているカテゴリが一番上に表示され、カテゴリ選択ボックスの階層が崩れて表示されてしまいます。 この現象に違和感を感じてる方もおられるのではないでしょうか？ 例えば、下のような入れ子になったカテゴリ構造だとして 中間的な親カテゴリ「海外」にチェックを入れて記事を保存すると・・・ 選択したカテゴリーが一番上に表示されカテゴリ階層が崩れてしまいます・・・ WordPressをCMSとして利用している者としては、やはりカテゴリは隣接するカテゴリが常に同じカテゴリでないと操作に迷ってしまったり、視覚的にメニュー位置でカテゴリ全体の構造を把握したほうが操作しやすいのではないでしょうか？ そこで、入れ子になったカテゴリにチェックをして保存をしても、カテゴリ選択ボックスのカテゴリ階層を保つ方法をご紹介したい
WordPressのファイルアップロードでファイル名をリネームする方法
WordPressのファイルアップロードでファイル名をリネームする方法を紹介します。 １．問題点 WordPressのファイルをまとめてアップロードしたいのですが、ファイル名をアップロード時のタイムスタンプに統一したいと思ってます。 ということで、ファイルアップロードでファイル名をリネームする方法を紹介します。 参考までに、WordPressのアップロード先は、 wp-content/uploads/YYYY/MM です。 ２．ファイルアップロードでファイル名をリネームする ファイル名をリネームするには、function.phpに下記のコードを追加します。 function rename_file($filename) { $pathinfo = pathinfo($filename); return date("YmdHis") . "." . $pathinfo['extension'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テーマカスタマイザのラジオボタン項目で選んだ値が正しく出力されない