WordPressでWebコンポーネントを使用することは、あなたが思っているよりも簡単です-CSSチュートリアル-php.cn

記事シリーズ

Webコンポーネントファイルのロード

Webコンポーネントを除外しないでください

テーマにコンポーネントを追加します

ブロックパーティー：カスタムブロックのWebコンポーネント

Webコンポーネントに接続します

悪くないよね？

ホームページ

ウェブフロントエンド

CSSチュートリアル

WordPressでWebコンポーネントを使用することは、あなたが思っているよりも簡単です

Joseph Gordon-Levitt

Mar 21, 2025 am 11:09 AM

WordPressでWebコンポーネントを使用することは、あなたが思っているよりも簡単です

WebコンポーネントとインタラクティブなWebコンポーネントの両方が思っているよりも使いやすいことがわかったので、コンテンツ管理システム、つまりWordPressに追加する方法を見てみましょう。

それらを追加する3つの主な方法があります。まず、手動でウェブサイトに入ることにより、基本的に他のHTMLを配置できる場所に、ガジェットまたはテキストブロックに直接入力します。次に、テーマファイルにテーマ出力として追加できます。最後に、それらをカスタムブロックの出力として追加できます。

記事シリーズ

（あなたはここにいます）

Webコンポーネントファイルのロード

Webコンポーネントを追加する方法に関係なく、次のことを確認する必要があります。

<li>カスタム要素のテンプレートが必要な場合は、利用可能でなければなりません。 <li>必要なJavaScriptは正しく登録されています。 <li>必要なカプセル化されていないスタイルは登録されています。

インタラクティブなWebコンポーネントに関する以前の記事から追加します<zombie-profile></zombie-profile>Webコンポーネント。 Codepenのコードを確認してください。

最初のポイントを見てみましょう。テンプレートを取得したら、WordPressテーマのfooter.phpファイルに簡単に追加できますが、テーマに直接追加するのではなく、 wp_footerにフックして、コンポーネントのロードがfooter.phpファイルとテーマwp_footerに依存しないようにします。試行中にテンプレートがテーマに表示されない場合は、テーマのfooter.phpテンプレートファイルでwp_footerが呼び出されているかどうかを再確認してください。

  <p>次はコンポーネントを登録するJavaScriptです。 <code>wp_footer</code>を介してJavaScriptを追加することもできますが、登録はJavaScriptをWordPressにリンクする推奨方法です。 javascriptを<code>ezwebcomp.js</code>という名前のファイル（この名前は完全にarbitrary意的です）に入れ、ファイルをテーマのjavascriptディレクトリ（存在する場合）に配置し、（functions.phpファイルに）登録します。</p><pre class="brush:php;toolbar:false"> wp_enqueue_script（ 'ezwebcomp_js'、get_template_directory_uri（）。 '/js/ezwebcomp.js'、 ''、 '1.0'、true）;

ログイン後にコピー

最後のパラメーターがtrueに設定されていることを確認する必要があります。つまり、エンディングボディタグの前にJavaScriptをロードします。頭にロードすると、HTMLテンプレートが見つかりません。非常に怒っています（エラーの束を投げます）。

Webコンポーネントを完全にカプセル化できる場合は、次のステップをスキップできます。ただし、（私のような）これができない場合は、ウェブコンポーネントを使用する場所で利用できるように、カプセル化されていないスタイルを登録する必要があります。（JavaScriptと同様に、フッターに直接追加できますが、スタイルの登録が推奨される方法です）。したがって、CSSファイルを登録します。

 wp_enqueue_style（ 'ezwebcomp_style'、get_template_directory_uri（）。 '/ezwebcomp.css'、 ''、 '1.0'、 'screen'）;

ログイン後にコピー

これはそれほど難しくありませんよね？管理者以外のユーザーに使用することを計画していない場合は、使用する場所に追加することができます。しかし、それは常にではないので、私たちは前進し続けます！

Webコンポーネントを除外しないでください

WordPressには、ユーザーが有効なHTMLを作成し、EddieおじさんがShady Alから取得した「面白い」画像を編集者に直接貼り付けるのを防ぐいくつかの異なる方法があります（すべての訪問者をハッキングするためのスクリプトを含む）。

したがって、Webコンポーネントをブロックまたはウィジェットに直接追加する場合、WordPressに組み込まれたコードフィルタリングに注意する必要があります。それを完全に無効にすると、エディおじさん（およびシェイディーアル）が彼が望むことを何でもすることができますが、ウェブコンポーネントがゲートを通過できるように変更できます（幸運にも、エディおじさんをブロックします）。

まず、 wp_kses_allowedフィルターを使用して、Webコンポーネントをフィルタリングしてはならない要素のリストに追加できます。コンポーネントをホワイトリストに登録しているようなものです。これは、フィルター機能に渡されたタグアレイに追加することで行います。

 function add_diy_ezwebcomp_to_kses_allowed（$ the_allowed_tags）{
  $ the_allowed_tags ['zombie-profile'] = array（）;
}
add_filter（ 'wp_kses_allowed_html'、 'add_diy_ezwebcomp_to_kses_allowed'）;

ログイン後にコピー

私たちは<zombie-profile></zombie-profile>WordPressがプロパティと要素をフィルタリングするため、コンポーネントは空の配列を追加します。これにより、別の問題が発生します。 slot属性はデフォルトでは許可されません。したがって、使用すると予想されるすべての要素で明示的に許可する必要があります。したがって、ユーザーはそれをその中の任意の要素に追加することを決定できます。 true待って、各ユーザーで6回レビューしたとしても、これらの要素リストも異なります...誰slot知っていますか？）<span></span> 、<img alt="WordPressでWebコンポーネントを使用することは、あなたが思っているよりも簡単です" >そして<ul></ul>、これらの3つの要素を置きます<zombie-profile></zombie-profile>コンポーネントスロット。

 function add_diy_ezwebcomp_to_kses_allowed（$ the_allowed_tags）{
  $ the_allowed_tags ['zombie-profile'] = array（）;
  $ the_allowed_tags ['span'] ['slot'] = true;
  $ the_allowed_tags ['ul'] ['slot'] = true;
  $ the_allowed_tags ['img'] ['slot'] = true;
  $ the_allowed_tagsを返します。
}
add_filter（ 'wp_kses_allowed_html'、 'add_diy_ezwebcomp_to_kses_allowed'）;

ログイン後にコピー

また、次のコードと同様の方法を使用して、許可されたすべての要素でslot属性を有効にすることもできます。

 function add_diy_ezwebcomp_to_kses_allowed（$ the_allowed_tags）{
  $ the_allowed_tags ['zombie-profile'] = array（）;
  foreach（$ the_allowed_tags as＆$ tag）{
    $ tag ['slot'] = true;
  }
  $ the_allowed_tagsを返します。
}
add_filter（ 'wp_kses_allowed_html'、 'add_diy_ezwebcomp_to_kses_allowed'）;

ログイン後にコピー

残念ながら、別の可能な問題があります。スロット内のすべての要素がインライン/フレーズ要素である場合、この問題はない場合がありますが、Webコンポーネントに入れるブロックレベルの要素がある場合は、コードエディターのブロックパーサーと競合する可能性があります。あなたは私よりもボクシングが上手かもしれませんが、私はいつも負けます。

私が完全に説明できない理由で、クライアントパーサーは、Webコンポーネントにインライン要素を入力した場合にのみインライン要素を含める必要があると想定しています

または

または、最後のインライン/フレーズ要素の後にエンドのWebコンポーネントタグを移動する他のブロックレベルの要素。さらに悪いことに、WordPress開発者マニュアルのメモによると、現在「クライアントパーサーを置き換えることはできません」。これはイライラすることであり、Webエディターにこれを学ばせなければなりませんが、回避策があります。 WebコンポーネントをブロックエディターのカスタムHTMLブロックに直接配置した場合、クライアントパーサーは私たちを泣かせたり、歩道を前後に動揺させたり、コーディングする能力に疑問を投げかけたりしません...もちろん、これは誰にも起こりませんでした...特に記事を書く人...
テーマにコンポーネントを追加します
HTMLブロック以外で更新されていない限り、テーマファイルに美しいWebコンポーネントを出力するのは非常に簡単です。他のコンテキストで追加する方法を追加し、テンプレート、スクリプト、スタイルがインストールされていると仮定すると、物事が機能します。
ただし、WebコンポーネントのWordPress投稿またはカスタム投稿タイプのコンテンツを出力する必要があるとします。ご存知のように、投稿を書いてください。この投稿はコンポーネントのコンテンツです。これにより、WordPressエディターを使用して出力できます<zombie-profile></zombie-profile>要素のアーカイブ。 WordPressエディターはすでにそれらの1つを入力しているので、これは素晴らしいことです<zombie-profile></zombie-profile>コンポーネントコンテンツに必要なUIのほとんど：

<li>
投稿タイトルは、ゾンビの名前として使用できます。
<li>ポストコンテンツの通常の段落ブロックは、ゾンビステートメントに使用できます。
<li>
注目の写真は、ゾンビのプロフィール写真に使用できます。

それはほとんどのコンテンツです！しかし、ゾンビの年齢、感染日、関心の分野がまだ必要です。 WordPressの組み込みカスタムフィールド機能を使用して、これらのフィールドを作成します。
各投稿（content.phpなど）を印刷するプロセスのテンプレート部分を使用して、Webコンポーネントを出力します。まず、開いたものを印刷します<zombie-profile></zombie-profile>タグ、次にサムネイルを投稿します（存在する場合）。
<zombie-profile> "> </zombie-profile>
ログイン後にコピー
次に、名前に使用されるタイトルを印刷します
 
ログイン後にコピー
私のコードでは、2つの理由で印刷する前にこれらのフィールドが存在するかどうかをテストしました。

<li>ほとんどの場合、空のフィールドの周りにラベルと要素を隠すことは、良いプログラミングの練習です。
<li>空の名前を出力することになった場合<span></span>（たとえば、 `），那么该字段将在最终的个人资料中显示为空，而不是使用我们Web组件内置的默认文本、图像等。（例如，如果你希望文本字段在没有内容时为空，你可以在自定义字段中输入空格，或者跳过代码中的）。

次に、カスタムフィールドを取り、それらが属するスロットにそれらを配置します。繰り返しますが、これはポストコンテンツを出力するためのトピックテンプレートに移動します。
   
ログイン後にコピー
 
 
 WordPressカスタムフィールドを使用することの欠点の1つは、特別なフォーマットができないことです。このコンテンツを入力する非技術的なWebエディターは、リスト内の各利息アイテムに対して記述する必要があります<li>タグ（例： 20. ）。 （高度なカスタムフィールド、ポッド、または同様のプラグインなどのより強力なカスタムフィールドプラグインを使用して、このインターフェイスの制限を解決できる場合があります。）最後に、ゾンビステートメントとエンディングを追加します。<zombie-profile></zombie-profile>ラベル。
  
ログイン後にコピー
投稿の本文を声明として使用するため、コンテンツを囲む段落タグなど、追加のコードを取得します。カスタムフィールドにプロファイルステートメントを入力すると、これを軽減できますが、目的に応じて、予想/希望する動作でもあります。
その後、各投稿を投稿するだけで、必要なだけ多くの投稿/ゾンビプロファイルを追加できます！
ブロックパーティー：カスタムブロックのWebコンポーネント
カスタムブロックの作成は、Webコンポーネントを追加するのに最適な方法です。ユーザーは、必要なフィールドに記入し、コードや技術的な知識なしにWebコンポーネントの魔法を取得することができます。また、ブロックは完全にテーマに依存しているため、このブロックを1つのWebサイトで使用して、他のWordPressサイトにインストールできます。これは、Webコンポーネントが機能することを期待する方法のようです。
カスタムブロックには、PHPとJavaScriptの2つの主要部分があります。また、編集体験を改善するためにいくつかのCSSを追加します。
最初はPHPです：
関数ez_webcomp_register_block（）{
  //カスタムブロックを構築するために必要なJavaScriptを登録します
  wp_register_script（
    「ez-webcomp」、
    plugins_url（ 'block.js'、__file__）、
    array（ 'wp-blocks'、 'wp-element'、 'wp-editor'）、
    filemtime（plagin_dir_path（__ file__）。 'block.js'）
  ）;

  //コンポーネントのCSSファイルwp_register_styleを登録する（
    「ez-webcomp」、
    plugins_url（ 'ezwebcomp-style.css'、__file__）、
    配列（）、
    filemtime（plagin_dir_path（__ file__）。 'ezwebcomp-style.css'）
  ）;

  //カスタムブロック登録登録_block_type（ 'ez-webcomp/zombie-profile'、array（
    //すでに外部スタイルがあります。
    'editor_script' => 'ez-webcomp'、
  ））;
}
add_action（ 'init'、 'ez_webcomp_register_block'）;
ログイン後にコピー
 CSSは必須ではありません。ゾンビのプロフィール写真がWordPressエディターの内容と重複するのを防ぐのに役立ちます。
 /*画像の幅と高さを設定します。
 *走行距離は異なる場合があるため、必要に応じて調整してください。
 *「pic」は、block.jsのエディターに追加するクラス*/
#editor .pic img {
  幅：300px;
  高さ：300px;
}
/*このCSSは、正しいスペースが画像に割り当てられることを保証します。
 *また、画像を選択する前にボタンが変更されないようにします。
*/
#editor .pic button.components-button {
  オーバーフロー：可視;
  高さ：自動;
}
ログイン後にコピー
必要なJavaScriptはもう少し複雑です。私はそれを可能な限り簡素化し、可能な限りアクセスしやすくしようとしたので、ES5を使用してそれを書き、コンピレーションの必要性を排除しました。
コードを表示します

（関数（ブロック、編集者、要素、コンポーネント）{
  //要素を作成する関数var el = element.createelement;
  //ブロックフィールドのテキスト入力var richtext = editor.richtext;
  // Image/Media var mediaupload = editor.mediaupload;

  // phpのregister_block_typeに戻ります
  blocks.registerblocktype（ 'ez-webcomp/zombie-profile'、{
    タイトル：「ゾンビプロファイル」、//ブロックセレクターアイコンに表示されるユーザーフレンドリー名： 'id-alt'、//ブロックセレクターカテゴリで使用されるアイコン： 'leaout'、
    //プロパティは、使用するすべての異なるフィールドです。
    //それらが何であるか、そしてブロックエディターがそれらからデータを取得する方法を定義しています。
    属性：{
      名前： {
        //コンテンツタイプ： 'String'、
        //情報の取得に使用できる場所ソース：「テキスト」、
        //セレクターは、ブロックエディターがコンテンツを選択して取得する方法です。
        //これらはブロックのインスタンスで一意である必要があります。
        // 1つのIMGまたは1つのみをお持ちの場合<p>など、要素セレクターを使用できます。
        セレクター： '.zname'、
      }、
      MediaId：{type： 'number'、}、
      Mediaurl：{type： 'string'、source： 'astribute'、selector： 'img'、属性： 'src'、}、
      年齢：{type： 'string'、source： 'text'、selector： '.age'、}、
      infectdate：{type： 'date'、source： 'text'、selector： '.infection-date'}、
      興味：{type： 'array'、source： 'children'、selector： 'ul'、}、
      ステートメント：{type： 'array'、source： 'children'、selector： '.Statement'、}、
    }、
    //編集関数は、ブロックエディターにコンテンツを表示する方法を処理します。
    編集：function（props）{
      var属性= props.attributes;
      var onseectimage = function（media）{
        propributesを返します（{mediaurl：media.url、mediaid：media.id、}）;
      };
      // returnステートメントは、エディターに表示されるものです。
      // el（）要素を作成し、異なるプロパティを設定します。
      Elを返します（
        //簡単にするために、ここでゾンビプロファイルのWebコンポーネントの代わりにDivを使用します。
        「div」、
        {classname：propss.classname}、
        //ゾンビElの名前（richtext、{
          tagname： 'h2'、
          インライン：本当、
          className： 'zname'、
          プレースホルダー： 'ゾンビ名…'
          値：attributes.name、
          onchange：function（value）{
            props.setattributes（{name：value}）;
          }、
        }）、
        エル（
          //ゾンビプロフィール写真「div」、
          {className： 'pic'}、
          el（mediaupload、{
            onSelect：onselectimage、
            AldoceTypes： 'image'、
            値：属性、mediaid、
            レンダリング：function（obj）{
              Elを返します（
                コンポーネント、ボタン、
                {
                  className：astributes.mediaid '' image-button '：'ボタンと態度 '
                  onclick：obj.open、
                }、
                ！attributes.mediaid 'upload image'： 'img'、{src：astributes.mediaurl}）
              ）;
            }、
          }）
        ）、、
        //ブロック編集者のゾンビ時代のタイトルel（ 'h3'、{}、 'age'）を含めます。
        //年齢フィールドEL（richtext、{
          tagname： 'div'、
          クラス名：「年齢」、
          プレースホルダー： 'Zombie \' s Age… '、
          値：属性、age、
          onchange：function（value）{
            props.setattributes（{age：value}）;
          }、
        }）、
        //感染日タイトルel（ 'h3'、{}、 '感染日'）、
        //感染日フィールドEL（richtext、{
          tagname： 'div'、
          className： 'Infection-date'、
          プレースホルダー： 'Zombie \'の感染日… '
          値：attributes.infectdate、
          onchange：function（value）{
            props.setattributes（{InfectionDate：Value}）;
          }、
        }）、
        //趣味のタイトルel（ 'h3'、{}、 'tentss'）、
        //ホビーフィールドEL（richtext、{
          tagname： 'ul'、
          //「Enter」キーを押すたびに、新しいキーが作成されます</p>
ログイン後にコピー
<li>
          マルチライン： 'li'、
          プレースホルダー：「興味のリストを書く…」、
          値：attributes.interests、
          onchange：function（value）{
            props.setattributes（{利益：値}）;
          }、
          クラス名：「興味」、
        }）、
        // Zombie Statement Title El（ 'H3'、{}、 'Statement'）、
        // Zombie Statement Field EL（richtext、{
          tagname： 'div'、
          クラス名：「ステートメント」、
          プレースホルダー： 'write Statement…'、
          値：attributes.Statement、
          onchange：function（value）{
            props.setattributes（{ステートメント：値}）;
          }、
        }）
      ）;
    }、
    //データベースにコンテンツを保存し、フロントエンドに表示します。
    //ここでは、Webコンポーネントが使用されていることを確認する必要があります。
    保存：function（props）{
      var属性= props.attributes;
      Elを返します（
        // WordPressでカスタム要素を使用するには、追加の手順が必要なため、通常のDivを使用します。
        「div」、
        {className： 'Zombie-Profile'、...属性}、
        //印刷前にすべてのフィールドが存在することを確認してください。
        attributes.name && el（ 'h2'、{classname： 'zname'}、attributes.name）、
        attributes.mediaurl && el（ 'img'、{src：attributes.mediaurl、slot： 'profile-image'}）、
        attributes.age && el（ 'div'、{classname： 'age'}、astributes.age）、
        attributes.infectdate && el（ 'div'、{className： 'Infection-date'}、attributes.infectDate）、
        attributes.Interests && el（ 'ul'、{}、attributes.interests）、
        attributes.statement && el（ 'div'、{classname： 'statement'}、astributes.Statement）
      ）;
    }、
  }）;
}（window.wp.blocks、window.wp.blockeditor、window.wp.element、window.wp.components））;
 Webコンポーネントに接続します
さて、心のこもった人、記事の作家、そして完全に素晴らしい人があなたのウェブコンポーネントをあなたのウェブサイトにプラグインして使用できるテンプレートを作成している場合、それは素晴らしいことではないでしょうか？まあ、その男は利用できませんでした（彼は慈善団体か何かを手伝うために行ったので）ので、私はしました。それはgithubにあります：
自分でやる -  WordPressのシンプルなWebコンポーネント
プラグインは、カスタムWebコンポーネントを登録し、コンポーネントが必要とするスクリプトとスタイルを登録し、必要なカスタムブロックフィールドの例を提供し、エディターで美しくスタイルされることを保証するエンコードテンプレートです。他のWordPressプラグインを手動でインストールするのと同じように、 /wp-content/pluginsの新しいフォルダーに配置し、特定のWebコンポーネントで更新してから、インストールされているプラグイン画面のWordPressでアクティブにします。
悪くないよね？
多くのコードがあるように見えますが、実際には、カスタムWebコンポーネントを登録およびレンダリングするために、かなり標準的なWordPress操作を行っています。また、プラグインとしてパッケージ化するため、WordPressサイトに配置して、満足するまでゾンビプロファイルの投稿を開始できます。
バランスポイントは、WordPressブロックエディターでコンポーネントをフロントエンドとして機能させようとしていると思います。この考慮事項がなければ、コードを減らすことでジョブを行うことができます。
それにもかかわらず、以前の投稿で作成したのとまったく同じコンポーネントをCMSに掲載しました。これにより、Webサイトに任意の数のゾンビプロファイルを配置できます。 Webコンポーネントの知識をWordPressブロックと組み合わせて、再利用可能なWebコンポーネント用の再利用可能なブロックを開発します。
 WordPress Webサイト用にどのようなコンポーネントを構築しますか？ここには多くの可能性があると思います。最終的に何を作るかを知りたいです。