質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

3640閲覧

モーダルウィンドウにajaxを経由して記事本文を表示した際にプラグインが展開されない原因について教えていただきたいです。

ya_ate

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/04/27 14:24

###前提・実現したいこと
wordpress4.5にて、ポップアップした空のモーダルウィンドウに、ajaxで投稿記事本文をロードさせて表示させるコードを作っています。

###発生している問題・エラーメッセージ

記事本文やcss、ファンクションに記述した一部のショートコードはモータルウィンドウに表示できるのですが、Crayon Syntax Highlighter等のプラグインがロードされずに困っています。
([php] [/php]がキャプチャされない。Table of Contents Plusプラグインの[TOC]はキャプチャされました。)

###該当のソースコード

javascript

1//モーダルウィンドウ作成スクリプト 2//class:btnsがクリックされたらモーダルウィンドウがポップアップしてphpのview_pageloadを呼び出して表示 3 4 jQuery('.btns').live('click', function(e){ 5 wn = '.' + $(this).data('tgt'); 6 var mW = $(wn).find('.modalBody').innerWidth() / 2; 7 var mH = $(wn).find('.modalBody').innerHeight() / 2; 8 $(wn).find('.modalBody').css({'margin-left':-mW,'margin-top':-mH}); 9 10 current_scrollY = jQuery( window ).scrollTop(); 11 12 var openflag = false; 13 14 var pageID = $(this).data('pageid'); 15$content = ".id-" + pageID; 16 17 jQuery.ajax({ 18 19 type: "POST", 20 datatext: {val:"ok"}, 21 timeout: 10000, 22 dataType: 'post', url: ajaxurl, 23 24 /** 25 * Ajax通信が成功した場合に呼び出されるメソッド 26 */ 27 data: { 28 'action' : 'view_pageload', 29 'pageID': pageID, 30 31 }, 32 success: function(data){ 33jQuery( '#wrapper' ).css( { 34 position: 'fixed', 35 36 } ); 37 jQuery($content).html(data); 38jQuery(wn).fadeIn(500); 39 40 return false; 41 42 }, 43 44 }); 45 46 }); 47 48 jQuery('.close,.modalBK').live('click', function(e){ 49 50 //jQuery('.close,.modalBK').click(function(){ 51 jQuery( '#wrapper' ).attr( { style: '' } ); 52 jQuery( 'html, body' ).prop( { scrollTop: current_scrollY } ); 53jQuery($content).html(""); 54 jQuery(wn).fadeOut(500); 55 }); 56 57 58 });

php

1//functions.php 2function view_pageload(){ 3 4$post_id = array(); 5$post_id[] = $_POST['pageID']; 6 $echo = ""; 7 8$args = array( 9 'posts_per_page'=> 1, 10 'post__in' =>$post_id, 11 'orderby' => array( 12 'meta_value' => 'asc', 13 'date' => 'desc' 14 ) 15); 16 17$query = new WP_Query($args); 18 19 if( $query -> have_posts()){ 20 while ($query -> have_posts()) : $query -> the_post(); 21 22 $echo .= apply_filters('the_content',get_the_content()); 23 24 endwhile; 25 26} 27 wp_reset_postdata(); 28 29echo $echo; 30 31die(); 32}

###試したこと
apply_filtersやdo_shortcode等を試してみましたが効果がありませんでした。
参考にさせていただいた記事

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Crayon Syntax Highlighter等多くのプラグインは「ページが描画される」事を前提としているため、wp_head()などの動作にもフックをかけてCSS/jsを出力したりしています。そのため、現在お書きの functions.php ではそれが読み込まれません。

また、別途 js を読み込んでいても、Ajax では「 window.onload 」イベントが起きないため、ロードされた部分に js の処理が適用されません。(後から読み込まれることを考慮した奇特なライブラリなら問題ありませんが)

さらに、参考にされている記事に書いてある通り、functions.php に記述する方法では正常に動かないプラグインがあるため、別途 PHP ファイルを用意する方法を使われてはいかがでしょうか。

投稿2016/04/27 15:32

kei344

総合スコア69398

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問