コハムコハムWebクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。Fields記事は上記記事を意訳したものです。※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。Fieldsは、2createが開発した無料のWordPressライブラリです。WordPressのテーマやプラグイン開発者が、投稿タイプ、ナビゲーションメニュー、ウィジェットなどの追加フィールドを作成したり、JavaScriptに触れることなくカスタムGutenbergブロックを登録したりするのに役立ちます。途中で見ていくように、チェックボックス、リピーター(複合)、テキストなど、さまざまなフィールドが用意されています。PHPの依存関係マネージャーを通じてインストールします。JavaScriptの依存関係マネージャーのようなものだと考えてください。htmlburger/carbon-fieldsWordPressのテーマオプションページとは?テーマオプションページは、デフォルトのWordPressページの外部にある管理ページで、開発者がWordPressサイトやプラグインの機能に影響を与えるグローバル設定を保存する場所です。固定(sticky)にするかどうか。グローバルフォントサイズ、グローバルフォント、見出しの色など。データは通常、*_optionsテーブルに保存され、サイトのどのページからでも利用できます。Fieldsライブラリは、データベースに保存する際にすべてのフィールドの前にアンダースコアを自動的に付けることに注意してください(例:footer_textフィールドは_footer_textになります)。実装この実装例では、デモサイトのヘッダーレイアウト、フッターレイアウト、連絡先情報、ソーシャルチャンネルの情報を保持するオプションページを作成します。管理画面でページ構造を作成し、フロントエンドでフィールドを表示することに焦点を当てます。スタイルの追加は行いません。すべてのテーマファイルはこのGitHubリポジトリで利用可能です。いつものように、私のカスタムPlaygroundテーマを使用します。Fieldsに必要な機能のみを追加します。);このコードは、すべてのフィールドをコンテナでラップし、ダッシュボードメニュー項目の下に「テーマ設定」という新しいメニュー項目を作成します。項目の位置や表示されるアイコンをカスタマイズすることができます。add_tabメソッドを使用することで、オプションページのすべてのフィールドを4つのタブセクションにグループ化し、より良い構成を実現します。それでは、これらのタブを詳しく見ていきましょう!ヘッダータブヘッダータブには、ヘッダーの機能に関連するフィールドが含まれます。具体的には:リボンをメインヘッダーの上に表示するかどうかを管理するチェックボックスフィールド。リボンの外観を設定する3つのフィールド(リッチテキスト1つと色フィールド2つ)。これらは前のチェックボックスフィールドが選択されている場合にのみ表示され、機能します。6アイコンライブラリをheadタグに埋め込むためのヘッダースクリプトフィールド。このライブラリは、ソーシャルアイコンを表示するために使用します(後のセクションで詳しく説明します)。</nav></header>連絡先タブ連絡先タブには、異なるページセクション(例:ヘッダー、フッター、連絡先ページ、サイドバーなど)に表示される連絡先関連のフィールドが含まれます。具体的には:会社の住所を追加するためのテキストエリアフィールド。Maps位置へのリンクのためのテキストフィールド。会社の電話番号を追加するためのテキストフィールド。会社のメールアドレスを追加するためのテキストフィールド。7(CF7)フォームをニュースレターフォームとして選択できるようにする動的オプション付きのセレクトフィールド。サイトに以下のようなフォームがあると想像してください:これらすべてを管理ユーザーが利用できるようにする必要があります。ここでの課題は、これらをハードコードするのではなく、セレクトフィールドのすべてのオプションを動的にすることです。これを実現するために、カスタムget_all_forms関数を定義し、それをセレクトフィールドのadd_optionsメソッドのパラメータとして渡します。この関数は、サイトのすべてのフォームを配列形式で返します。?></div>ソーシャルタブソーシャルタブには、無限数のソーシャルメディアを追加するための複合フィールドが含まれます。各ソーシャルメディアには3つのテキストフィールドがあります:ソーシャルメディアのタイトル用のテキストフィールド(例:Facebook)。ソーシャルメディアのURL用のテキストフィールド。Awesomeクラスを配置するためのテキストフィールド(例:Facebookクラス)。ACFの世界から来た方々のために説明すると、複合フィールドはACFのリピーターフィールドに相当します。?></ul>フッタータブヘッダータブと同様に、フッタータブにはフッターの機能に関連するフィールドが含まれます。具体的には:フッターテキストを出力するためのテキストフィールド。フッターの前景色と背景色を設定する2つの色フィールド。WordPressカスタムフィールドツールキットについて説明し、テーマオプションページを構築することで、そのさまざまなフィールドタイプを探索しました。これで、次のWordPressプロジェクトでこのライブラリがニーズに合うかどうかを判断するのに十分な材料が得られたと思います。カスタマイザーを拡張することにあまり興味がない場合。管理インターフェースなしで作業できる場合。少数のフィールドを必要とするプラグイン/テーマを構築する場合。PROのように、より多くのタイプオプションとレイアウトスタイリングを提供する有料のWordPressプラグインを使用することに問題がない場合。UIを通じてフィールドを管理することを好み、コードでフィールドを管理することに圧倒される場合。必須ではありませんが、多言語サイト/プラグインを構築している場合は、選択した翻訳ツールで公式にサポートされているソリューションを選ぶことをお勧めします。FieldsはWPMLと問題なく動作するようですが(ドキュメントと私のローカルテストによると)、このツールはWPMLと公式には互換性がありません。Fields」誕生で波紋広がる。10:30Webクリエイターのコハムです。地味な事務職からWeb制作会社に転職してフリーランスになりました。キンクマハムスターと2人暮らし。3©コハム引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。