2017-09-18 1 views
0

Dans un modèle, je souhaite cloner le contenu de "# content-standard" dans # content-blue. Cela est fait dans jQuery et fonctionne bien. Le contenu cloné obtient un style différent, qui est défini dans son nouveau parent avec la classe "new-bgcolor".Modification du contenu cloné avec PHP et 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> 

Mais après le clonage, je dois remplacer un certain morceau de ce contenu pour correspondre avec le nouveau style de la nouvelle-bgcolor.

Le contenu de la norme de contenu est généré en récupérant la partie de contenu content-page.php dans les parties du dossier. Pour le contenu standard à l'intérieur du div contenu-bleu, j'ai besoin de charger une autre partie du modèle, qui charge une fonction. Cette fonction permet de cloner et de modifier une image téléchargée avec un script iMagick et d'étendre le nom afin que l'image modifiée n'écrase pas l'original. Par conséquent, la partie template "content-page.php" aveC# content-standard "charge une image" //localhost:3000/content/uploads/2017/09/image.jpg ", partie du modèle" content-page_blue. php » devrait charger "//localhost:3000/content/uploads/2017/09/image-blurred.jpg"

contenu page_blue.php obtient l'image floue par cette fonction.

<?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 } ?> 

cette Le problème avec la nouvelle configuration est que je n'arrive pas à charger "content-page_blue.php" dans la div clonée Ma connaissance de jQuery est limitée et j'ai utilisé ceci:

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

Il ne peut pas trouver la partie de modèle et a rebondi un

404 Erreur http://localhost:3000/parts/content-page_blue.php

Peut-être que cela a à voir avec la configuration Skeleton WP (qui met le contenu et WP dossier dans un dossier public) en combinaison de la page qui charge le script est différent des parties du modèle? Il ressemble à ceci: theme setup. Toute aide est appréciée et désolé pour la longue histoire.

+0

'newContent' est un objet ** jQuery **, pourquoi le concaténez-vous dans la fonction de chargement? – adeneo

+0

L'idée était de pointer vers la div aveC# content-standard à l'intérieur de div div ## content-blue. Est-il préférable de faire $ ('# jl-gold'). Load ("./pièces/contenu-page_gold.php # jl-gold> # jl-standard"); ? Après avoir posté ceci j'ai appris que le chemin est relatif à la page qui a chargé le manuscrit, ainsi je devrais trouver un moyen de rediriger vers un autre dossier. Si c'est possible de toute façon. –

+0

Dans 'load' vous pouvez récupérer du contenu à partir d'un élément à l'intérieur de la page chargée, mais vous devez passer une chaîne, comme' .load ("mypage.php #elem") ', en ce moment vous passez un objet jQuery , et se termine par la même chose que '.load (" mypage.php [objet, objet] ")' – adeneo

Répondre

0

Au lieu de la fonction PHP, un de mes amis m'a dit qu'il pourrait être fait exactement la même chose dans jQuery. Voici le résultat.

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(); 

Espérons que cela aide n'importe qui.