地獄は、Wordpressです:パート1

すべてのdevはそれをしなければなりません.私たちはすべて、WordPressと1つのサイトをしなければならないので、それはクライアントが望んでいるので、すべての公平で、それはポートフォリオのために良いことができるので、無限の再帰的な鳥の巣からの合理的なウェブサイトを打つことができるdevは、18歳のブログCMSはおそらく任意の状況で足を見つけることができます.したがって、サークルを正方形にしようとすると私の多くのsisypheanの経験に従い、小枝やワイヤーのビットの応答、現代的なウェブサイトを構築します.
あなたがそれの後ろでサイト全体を構築していないならば、あなたはあなたのページを構成要素に壊しています、そして、彼らのいくつかはJavascriptベースです.JSは今モジュラー、パッケージ管理、非同期、携帯電話、モジュラー、InteractiveOdularです.
しかし、WordPressは、これをしている間、スヌーズ状態にありました.あなたは、WordPressにJavaScriptを統合しないでください.ホット接着剤側にそれをスライドさせない希望.
ジャバスクリプト?それは、彼らが警告箱のために使うものでありませんか?
いくつかの種類のオープンソースのようにWordPressの裏側に執着しているが、実際にはRemora Fishではない、斜めの、そして、記念碑的なプラグイン産業を見ているならば、JavaScriptはJQueryと交換可能である.つまり、何か他に何か必要なの?
JQueryはまだこのような古代のソフトウェアの部分にかなり座っている奇妙なフィッティングのようだが、実用的にはそれは悪い.
それは脂肪、ゆっくりとjQueryについて聞いたすべての他の悪いことだ.私からそれを得てください.
では、最新のパッケージを使い始めましょう.いくつかの良いlibsを得る.どのようにuhhh.どうやってやるの?まあそれは簡単です!WordPressはフックシステムを採用しています.このプロセスのために、私はそれがWordPressの次に立っていることによってdenigrateすることを意味しないFickketyと呼ばれている楽しく軽量でモバイルフレンドリーなCarrouselシステムを統合しています.
それはコードの良いビットと私はそれをお楽しみください.
よろしい.そこでスクリプトを登録しなければなりませんenqueue ローディングスタック内のスクリプトと、それはすべての関数と呼ばれるサイト内のすべての大きな厄介なファイルに詰め込まれます.必然的にダクトテープとパッチコードでいっぱいの巨大なマルチラインゴリアテになるPHP.WOEは、関数で動作する必要がある誰でもベイト.古いサイトのPHP.

function flickity_load(){
wp_register_script('flickity', get_template_directory_uri() . '/src/flickity/flickity.min.js', [], false, true);  wp_register_style('flickity_styling', get_template_directory_uri() . '/src/flickity/flickity.css')
}

それが登録されているので、次は何.今すぐ私はそれをenqueue.

function flickity_load(){
  wp_register_script('flickity', get_template_directory_uri() . '/src/flickity/flickity.min.js', [], false, true);
  wp_register_style('flickity_styling', get_template_directory_uri() . '/src/flickity/flickity.css');
  wp_enqueue_script('flickity');
  wp_enqueue_style('flickity_styling')
}

それは間違いなくコードです.いくつかの良い空のパラメータといくつかの他のクラップ.それでも、何もしません.それらは、彼らが好きであるフックでありません..フックのフック.そこに着きます.
注意:最後のtrueはスクリプトタグをフッターに配置することです.デフォルトはfalseです.なぜ?
では、ライブラリをインスタンス化する必要があります.ライブラリを複数のコンポーネントからインスタンス化しようとしますが、長い話は簡単です.

<script type="text/javascript">
const carousel = new Flickity('my-carousel', {...options...})
</script>

ちょっと簡単なインスタンス化だけで、問い合わせの要素クラスとオプションのオブジェクトを与えます.しかし、私はそれがどのような要素の上にglobsを定義することができたいか、私が1つのページに1つ以上のカルーセルを持っている場合、変数と呼ぶものをセットしたいです、そして、私はオプションをセットすることができたいです.これは、サーバー側のテーマ層からブラウザ側JSエンジンに変数を渡すことを意味します.という意味です.

地獄JS地獄レベル
私はflickityを必要とするコンポーネントをロードするたびに.私はそれをトリガーするコードを追加すると思います.これは動作を意味します.アクションは、フックが得る方法です.フック?それで、私はテンプレートコンポーネントを構築します、そして、それの最初の線はそうです

do_action("component_has_carousel");

そして今、関数ファイルにフックを渡します.

function component_has_carousel($args) {
  flickity_load();
}
add_action('component_has_carousel', 'component_has_carousel');

よろしい.コンポーネントが存在するときはいつでもライブラリをロードします.それは正しいですか.

かしら?
したがって、現在、私はファイルベースのまわりで散らばったコードのこれまでに成長している部分にパラメータを渡す必要があります.引数変数を渡すことができます do_action(); それで、私は配列のすべてを平手打ちする必要があると思います.

do_action("component_has_carousel", 
  array(
    'element' => 'my-carousel',
    'name' => 'myCarousel',
    'options' => '
      wrapAround: true,
      setGallerySize: false,
      pageDots: false,'
    )
);

新しい.さて、これらの引数を取り、JavaScriptにしなければなりません.JavaScriptをインラインで待つかどうやってやるの?まず最初に、新しいJavaScriptを使って登録します wp_add_inline_script , JavaScriptがJavaScriptの登録された部分に接続されなければならないので、おかしいJavaScriptはこれが最近の追加であるということですhack it in with a localisation hook ). それで、我々は我々の旧友関数に戻ります.PHPがインラインスクリプトをエンコーディングするだけで、インラインコードをピンに入れることができます.

function component_has_carousel($args) {
  flickity_load();
  wp_register_script($args['name'],'',);
  wp_enqueue_script($args['name'], '',[], false, true);
}

そして、現在、それはそれを置いていません.コードblasphemyをコミットしなければなりません.PHPに挿入されたJSを記述しなければなりません.それは醜いです.それは読めない.それはすべての地獄としてハッキーです.
ワードプレス

function component_has_carousel($args) {
  flickity_load();
  wp_register_script($args['name'],'',);
  wp_enqueue_script($args['name'], '',[], false, true);
  wp_add_inline_script($args['name'], 
    'const '. $args['name'] .' = new Flickity(".' . $args['element'] 
    . '", {'.   $args['options'] .'});'
  );
}

そして、まだ読んでいるあなたのそれらに.何が我々の努力を示す必要がありますか?

<script type="text/javascript" src="/wp-content/themes/theme/src/flickity/flickity.min.js?ver=5.8" id="flickity-js"></script>
<script type="text/javascript" id="my-carousel">
  const myCarousel = new Flickity( ".my-carousel", {
    wrapAround: true,
    setGallerySize: false,
    pageDots: false,
    }
  );
</script>

あなたは、すべてを得ましたか?すべての2つのスクリプトのタグをフレーク?これは困難ではない、これはとても迷宮ではありません.WordPressは私のために祈る.私はやるまでに長い道のりがある.