Loopje(s)

Door Nien E op 17-05-2018 11:49 gewijzigd op 17-05-2018 11:51

2.505 views

Hi allen,

Ik ben hier nieuw, dus zal even kort iets over mezelf vertellen. Ik ben vroeger frontend developer geweest (CSS, HTML, WP,) en ben nu voor een eigen project bezig met het ontwikkelen van een website. Het is al even geleden! Qua programmeren kom ik er, na wat zoekwerk, eigenlijk vaak wel uit. Maar ik schrijf niet bepaald de meest nette code.

Nu ook 'loop' ik tegen iets aan wat volgens mij veel makkelijker moet kunnen. Ik gebruik namelijk telkens hetzelfde loopje. Zou iemand mij misschien willen uitleggen hoe ik het volgende gemakkelijker kan coderen?

Mochten jullie meer informatie nodig hebben dan hoor ik het graag!

Groetjes,
Nien


<div class="css-slider-wrapper">
  <?php
    $counter = 0;
    $args = array( 'post_type' => 'slider', 'posts_per_page' => 10 );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
      <input type="radio" name="slider" class="slide-radio<?php echo $counter;?>" <? if($counter==1){ ?> checked <? } ?> id="slider_<?php echo $counter;?>">
  <? endwhile;?>
  <?php wp_reset_query();?>
  <div class="slider-pagination">
  <?php
    $counter = 0;
    $args = array( 'post_type' => 'slider', 'posts_per_page' => 10 );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
      <label for="slider_<?php echo $counter;?>" class="page<?php echo $counter;?>"></label>
    <? endwhile;?>
    <?php wp_reset_query();?>
  </div>
  <div class="next control">
    <?php
    $counter = 0;
    $args = array( 'post_type' => 'slider', 'posts_per_page' => 10 );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
    <label for="slider_<?php echo $counter;?>" class="numb<?php echo $counter;?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/js/slider/image/right.png"></label>
     <? endwhile;?>
     <?php wp_reset_query();?>
  </div>
  <div class="previous control">
    <?php
    $counter = 0;
    $args = array( 'post_type' => 'slider', 'posts_per_page' => 10 );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
    <label for="slider_<?php echo $counter;?>" class="numb<?php echo $counter;?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/js/slider/image/left.png"></label>
    <? endwhile;?>
    <?php wp_reset_query();?>
  </div>
  <?php
    $counter = 0;
    $args = array( 'post_type' => 'slider', 'posts_per_page' => 10 );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
  <div class="slider slide<?php echo $counter;?>" style="background-image: url(<?the_post_thumbnail_url('');?>);">
    <div>
      <h2><? the_title();?></h2>
      <a href="<?php the_field('link') ?>" class="button"><? the_field('tekst_button'); ?></a></div>
  </div>
     <? endwhile;?>
     <?php wp_reset_query();?>
</div>

Thomas van den Heuvel

17-05-2018 12:08 gewijzigd op 17-05-2018 12:10

Zodra je dingen gaat herhalen loont het de moeite om te overwegen om een functie te schrijven die wat code bundelt.

Maar als ik naar het bovenstaande kijk doe je binnen de loops toch wat uiteenlopende dingen (qua HTML weergeven). De vraag is of je al die varianten kunt vangen in functie-parameters.

Je zou er ook misschien voor kunnen kiezen (ik "spreek" niet echt WordPress) om die snippets HTML te verplaatsen naar een of meer aparte templates (als er zoiets is in WP) en het uitvoeren van de query en het ophalen van de resultaten en het uitdraaien van de HTML op grond van deze resultaten te scheiden. Maar dat resulteert in een dubbel aantal loops: een loop voor het ophalen van alle resultaten, die je vervolgens aan het template voert, maar daar heb je dus vervolgens weer een loop voor het weergeven van alle informatie.

Het lijkt mij in ieder geval geen zin hebben om dezelfde query (tenzij ik iets mis? de argumenten post_type en posts_per_page zijn elke keer hetzelfde?) meerdere keren uit te voeren. Je zou de resultaten hiervan op kunnen slaan in een array, en dan dit array raadplegen. Minder communicatie (en vooral als het overbodige betreft) met de database is altijd goed. Het scheiden van query en template is dan wel wat zinniger, je kunt dan gewoon het array voeren aan alle templates.

Wat ik dus op zijn minst zou doen is dezelfde queries (5) reduceren tot één query. Dan zou je nog kunnen overwegen om dit geheel in een functie te stoppen (die mogelijk op zijn beurt weer gebruik maakt van een template) ook al roep je deze maar 1x aan, daarin kun je dan wel je hele navigatie kwijt, waardoor je op het hoogste niveau in je code ((main)template?) enkel een aanroep van "slider_navigation()" of iets dergelijks ziet in plaats van de bovenstaande lap code.

Nien E

17-05-2018 12:24

Bedankt voor je snelle en uitgebreide reactie Thomas! Ik ga proberen om een array te maken. Eens kijken of het lukt :-) Een functie heb ik nog nooit geschreven. Zal me hier eens in verdiepen. Dankjewel!

[size=xsmall]Toevoeging op 17/05/2018 12:41:21:[/size]

Ik heb in ieder geval voor nu de 5 queries tot 1 query gemaakt. Eigenlijk is er maar 1 loop (de laatste) die meer gegevens uit de query haalt. De eerste vier heb ik alleen nodig om de classes een getal mee te geven

<?php echo $counter;?>)

. De array en functies zijn op dit moment nog iets te complex voor mij, maar ik ben al heel blij met het volgende!



  <?php
    $args = array( 'post_type' => 'slider', 'posts_per_page' => 10 );
    $loop = new WP_Query( $args );
    ?>

<div class="css-slider-wrapper">
  <?php
    $counter = 0;
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
      <input type="radio" name="slider" class="slide-radio<?php echo $counter;?>" <? if($counter==1){ ?> checked <? } ?> id="slider_<?php echo $counter;?>">
  <? endwhile;?>
  <div class="slider-pagination">
  <?php
    $counter = 0;
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
      <label for="slider_<?php echo $counter;?>" class="page<?php echo $counter;?>"></label>
    <? endwhile;?>
  </div>
  <div class="next control">
    <?php
    $counter = 0;
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
    <label for="slider_<?php echo $counter;?>" class="numb<?php echo $counter;?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/js/slider/image/right.png"></label>
     <? endwhile;?>
  </div>
  <div class="previous control">
    <?php
    $counter = 0;
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
      <label for="slider_<?php echo $counter;?>" class="numb<?php echo $counter;?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/js/slider/image/left.png"></label>
    <? endwhile;?>
  </div>
  <?php
    $counter = 0;
    while ( $loop->have_posts() ) : $loop->the_post();
    $counter++;?>
  <div class="slider slide<?php echo $counter;?>" style="background-image: url(<?the_post_thumbnail_url('');?>);">
    <div>
      <h2><? the_title();?></h2>
      <a href="<?php the_field('link') ?>" class="button"><? the_field('tekst_button'); ?></a></div>
  </div>
     <? endwhile;?>
     <?php wp_reset_query();?>
</div>

Reageren

Inloggen om te reageren