2017-09-18 11 views
0

テンプレートでは、#content-standardのコンテンツを#content-blueにクローンしたいと思います。これはjQueryで行われ、うまく動作します。クローンされたコンテンツは異なるスタイルを取得します。新しいスタイルは新しい親クラスのnew-bgcolorクラスで設定されます。PHPとjQueryでクローンされたコンテンツを変更しました

HTML

<div class="content-wrapper"> 
<div class="content-container-main">  
    <div id="content-blue" class="new-bgcolor"> 
    </div> 
</div>  
<div id="content-standard"> 
    <main id="front-page" role="main"> 
    <?php $args = array('posts_per_page'=>1,'cat=-2'); 
     if(!isset($loopfront)){ $loopfront='';} $loopfront = new WP_Query($args); 
     while ($loopfront->have_posts()) { $loopfront->the_post(); get_template_part('./parts/content', 'page');}unset($loopfront); ?> 
    </main>    
</div> 

しかし、クローニングした後、私は新しい-BGCOLORから新しいスタイリングに合わせてこのコンテンツの特定の部分を交換する必要があります。

content-standardからのコンテンツは、フォルダ部分のテーマ部分content-page.phpを取得することによって生成されます。 divコンテンツ(青色)内のコンテンツ標準の場合は、関数をロードする別のテンプレート部分をロードする必要があります。この機能は、アップロードされた画像をiMagickスクリプトで複製して変更し、変更した画像が元の画像に上書きされないように名前を拡張します。

テンプレートの "content-page.php" with#content-standard "画像をロード" //localhost:3000/content/uploads/2017/09/image.jpg "テンプレート部分" content-page_blue。 PHPは//localhost:3000/content/uploads/2017/09/image-blurred.jpg "

コンテンツ-page_blue.phpが、この機能によってぼやけた画像を取得し、」ロードする必要があります"。

<?php $page = get_post(); $image_alt = get_post_meta($page->ID, '_wp_attachment_image_alt', true); $featured = wp_get_attachment_image(get_post_thumbnail_id($page->ID), 'full'); $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true); $path = pathinfo($thumb_url[0]); $extension = pathinfo($thumb_url[0], PATHINFO_EXTENSION); $newfilename = $path['filename']."-blurred"; $newfile = $path['dirname']."/".$newfilename.".".$extension; $thumbs = get_field('thumbs', $page->ID);?><?php if($featured) { ?> <div id="post-featured-<?php echo $post->ID; ?>" class="post-image"><a href="<?php the_permalink(); ?>"><img src="<?php echo $newfile; ?>"/></a><p><?php echo get_post(get_post_thumbnail_id())->post_excerpt;?></p></div><?php } ?> 

この新しいセットアップの問題は、クローンされたdivに "content-page_blue.php"をロードできないように見えることです。jQueryの知識は限られており、私はこれを使用しました:

$("#content-standard").clone().appendTo("#content-blue"); var newContent = $('#content-blue').siblings('#content-standard'); $('#content-blue').load("parts/content-page_blue.php" + newContent); 

これは、テンプレート部分を見つけて、バウンスすることはできません

404エラーhttp://localhost:3000/parts/content-page_blue.php

多分これは、コンテンツを置くた(WPスケルトンのセットアップを行うようになっており、パブリックフォルダ内のWPフォルダ)とスクリプトを読み込むページの組み合わせがテンプレートの部分と異なっていますか?それは次のようになります: theme setup. 長いお話に感謝して申し訳ありません。

+0

「newContent」はjQuery **オブジェクト**です。なぜそれをロード関数で連結していますか? – adeneo

+0

アイデアは、親のdiv ## content-blueの中の#content-standardのdivを指すことでした。 $( '#jl-gold')を実行する方が良いですか?load( "./ parts/content-page_gold.php#jl-gold>#jl-standard"); ?これを投稿した後、私はそのパスがスクリプトを読み込んだページに相対的であることを知ったので、別のフォルダにリダイレクトする方法を見つけなければなりません。とにかくそれが可能ならば。 –

+0

'load'では、ロードされたページ内の要素からコンテンツを取得できますが、' .load( "mypage.php #elem") 'のような文字列を渡す必要があります。これは、今jQueryオブジェクトを渡しています'.load(" mypage.php [object、Object] ")' – adeneo

答えて

0

PHP関数の代わりに、私の友人はjQueryで全く同じことができると私に言った。ここに結果があります。

function swapImages() { var images = $('images-containing-div').find('img'); images.each(function(index) { var src_name = $(this).attr('src') if (src_name.length) { var temp_name = src_name.substring(0, src_name.length - 4); var new_name = temp_name + "-blurred.jpg"; $(this).attr('src', new_name); } });} swapImages(); 

これは誰にも役立ちます。

関連する問題