web-dev-qa-db-ja.com

個々の投稿に対して個別のJSアプリケーションを作成しますか？

Automatticは、 Picard というReact.jsベースのテーマを作成しています。すべてのJSコードはpicard.jsにあります。これについては以下を参照してください。 WordPress自体は「ルーター」を持っていませんが（ （ここで説明されているように ）、React.jsが持っていて変更するためにこのアプリケーションで使用されています。投稿が表示されたときのURL。

私の質問はです。投稿を表示するためのJSアプリケーションを作成する場合（posts.jsという名前のファイルなど）、別のJSアプリケーション（post.jsという名前のファイル）を使用する）個々の投稿を表示するには？

言い換えれば、クライアント側のルーターを使用したくないが、個々の投稿に対して小さなJSアプリケーションを作成（そして遅延ロード）したい場合、そしてユーザーがクリックして投稿のリストを見た場合、 posts.jsをロードしてください。

function picard_scripts() {
    wp_enqueue_style( 'picard-style', get_stylesheet_uri(), '20150405' );
    wp_register_script( 'picard-script', get_template_directory_uri() . 
        '/picard.js', array(), '20150506', true );
    wp_enqueue_script( 'picard-script' );
    wp_enqueue_style( 'genericons', get_template_directory_uri() . 
        '/genericons/genericons.css', array(), '3.4' );
}
add_action( 'wp_enqueue_scripts', 'picard_scripts' );

ご参考までに、バグがあると思うのでクライアント側のルーターは使用したくありませんが、JavaScriptでUIを構築したいので、URL /ルーティングの処理はWordPressに頼ることをお勧めします。 （WordPressにはルーターがありませんが）。

postsjavascripturlsrouting
2
Leahcim

私は提供された情報の私の理解に基づいて答えをまとめようとするつもりです。

ロジックについて説明する前に、いくつかの前提条件について概説します。

1）Picardと同じように、index.phpが優先するため、標準のWPテンプレート階層を迂回します。

2）エンドポイントはWP REST AP​​Iプラグインによって提供されます。

3）テーマをできるだけ単純にするために、ルーティングロジックをfunctions.phpに配置します。

ここから、サイトを単一ページの非同期アプリケーションとして構築するのか、標準の要求/応答スタイルのWebサイトとして構築するのかを決定する必要があります。

シングルページアプリケーションは、フロントエンドルーティングに大きく依存します。 JSの構造やフレームワークによっては、posts.jsとpost.jsの両方をプリロードすることもできます。あなたのURLはハッシュを含み、あなたのJSはAPIエンドポイントへのルートをマッピングします。

// basic example - your route patterns may vary
http://domain.com/#posts
http://domain.com/#post/my-post-slug

標準スタイルのWebサイトでは、PHPでルーティングを処理できます。あなたのURLは標準的なWP構造に従い、functions.phpはリクエストに基づいてあなたのJSライブラリをエンキューします：

// very basic routing logic - add any conditions as needed
function enqueue_template_scripts() {
    // load posts.js for blog page
    if(is_home()) {
        wp_enqueue_script('post-list', 'posts.js');
    }
    // load post.js for single requests
    if(is_single()) {
        wp_enqueue_script('post-single', 'post.js');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_template_scripts');

注：ルーティングロジック内で選択したことによっては、他のアクションフックがより効果的に機能する場合があります。この例では、スクリプトの組み込みを示すために「wp_enqueue_scripts」を使用しました。

1
dswebsme