jeder artikel eigenes aussehen.

lumo

hey leute. hab da n problem. will es so machen, dass jeder artikel in meinem blog n eigenes aussehen hat. sozusagen, dass der erste artikel ganz groß ist, der 2te kleiner, der 3te noch kleiner, der 4te wieder n bisschen größer und so weiter... so dass ich bis zum 10ten artikel jeden ein eigenes aussehen verpassen kann und danach die anderen anders aussehen. gibt es dafür ne lösung?? hab nur ne einfache lösung dafür... halt ne lösung, dass der erste atikel so aussieht und der rest so aussieht. will ja aber jeden anders aussehen lassen. also wenn der erste zum 2ten wird sieht er so aus wie der 2te vorher.... hoffe ihr versteht mich und könnt mir helfen. lg lumo

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Lass einen Zähler im Loop mitlaufen, und gib jedem Post-Container eine Klasse mit diesem Zähler. Zum Beispiel so:

PHP

<?php $i = 0; ?>
<?php while( have_posts() ) : the_post(); ?>
  <div class="post-<?php echo $i ?>">
    <h2><?php the_title(); ?></h2>
    <!-- more stuff ... -->
  </div>
<?php $i++; endwhile; ?>

Diese Post-Container kannst du dann per CSS wie gewünscht stylen.

Solche Themen gabs auch schon, vielleicht hilft dir auch die Forensuche weiter...

lumo

ja ok, klingt gut, nur wie muss ich denn das jetzt in den css stylen? .[COLOR=#000000]post-1 , .post-2...?

thx lumo
[/COLOR]

cywhale

Ja, marX gibt jedem DIV die klasse post-PostNummer, wie du geschrieben hast.
Per CSS kannst Du nun den Container stylen (.post-1{...}).
Nachdem die Container eindeutig sind könnte man statt Klassen auch IDs nehmen:

PHP

<div id="#post-<?php echo $i ?>">

Oder kombinieren:</span>

PHP

<div id="#post-<?php echo $i ?>" class="my-post-container">

dann könntest Du .my-post-container alle Eigenschaften geben die den Containern gemeinsam sind und per ID-Styles nur die Veränderungen extra angeben.

Grüsse

marX

cywhale hat ja schon alles soweit erklärt. Nur eins noch: mein Zähler beginnt bei 0, nicht bei 1. ;-) Achja, und die Raute gehört da nicht hin, nur in die CSS-Datei:

PHP

<div id="[COLOR="Red"]#[/COLOR]post-<?php echo $i ?>" class="my-post-container">

cywhale

:oops::oops: Weia, nicht aufgepasst...

lumo

sorry jungs, aber ich versteh davon leider nicht so viel und probier nun schon siet stunden hier rum, aber bekomm das nicht so eingebaut, dass es überhaupt klappt und ohne fehlermeldung....
vielleicht könnt ihr mir ne kleine gedankenspritze geben...
das hier ist meine aktuelle code. mit dem ist halt der erste artikel immer anders

PHP

<?php get_header(); ?>


    <?php get_sidebar(); ?>


    <div id="content">


    <?php if (have_posts()): ?>
    


            <?php for ($i = 0; have_posts(); $i++ ) : the_post()?>
         <?php if ( $i == 0):?>
         <!-- hier dein code für den ersten eintrag-->
         <div id="post-<?php the_ID(); ?>" class="post">
            <p class="date"><?php the_time('j'); ?> <b><?php the_time('M'); ?></b></p>




            <p class="meta"><small><?php edit_post_link('Edit', ' | ', ''); ?><br />
               <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'comments'); ?></small></p>


<div class="title4">


<h2 class="title4"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>


</div>




<?php $image = get_post_meta($post->ID, 'image_des_beitrags', true); ?>
<a href="<?php the_permalink() ?>"><img class="image_des_beitrags2" src="<?php get_option('siteurl'); ?>http://www.ludk.de/pic/wpn/<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>




            <div class="entry2">


               <?php the_excerpt_reloaded(35, '', 'none', TRUE, '<img src="http://www.ludk.de/wordpress/wp-content/themes/asterisk/images/read.png" />', FALSE, 2); ?>




            </div>
         </div>
         <?php else:?>
         <!-- hier der für alle andern....-->
         <div id="post-<?php the_ID(); ?>" class="post">




            <p class="date2"><?php the_time('j'); ?> <b><?php the_time('M'); ?></b></p>
        
            <p class="meta"><small><?php edit_post_link('Edit', ' | ', ''); ?><br />
               <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'comments'); ?></small></p>


<?php $image = get_post_meta($post->ID, 'image_des_beitrags', true); ?>
<a href="<?php the_permalink() ?>"><img class="image_des_beitrags" src="<?php get_option('siteurl'); ?>http://www.ludk.de/pic/wpn/<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>




<div class="title5">


<h2 class="title5"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>


</div>


            <div class="entry">


<?php the_excerpt_reloaded(20, '', 'none', TRUE, '<img src="http://www.ludk.de/wordpress/wp-content/themes/asterisk/images/read.png" />', FALSE, 2); ?>


            </div>
         </div>
         <?endif?>
      <?php endfor; ?>


        
        <div class="navigation">
            <div class="alignleft"><?php previous_posts_link('&laquo; Newer Entries') ?></div>
            <div class="alignright"><?php next_posts_link('Older Entries &raquo;') ?></div>
        </div>


    <?php else: ?>


        <h1 class="pagetitle">Not Found</h1>
        <p>Sorry, but you are looking for something that isn't here.</p>


    <?php endif; ?>


    </div>
    <!-- end content -->


<?php get_footer(); ?>

Alles anzeigen

könnt ihr mir da zeigen wo ichs einbaun muss? danke auf jeden fall schon mal für die mühe bis jetzt. lg lumo

marX

Zitat von lumo

sorry jungs, aber ich versteh davon leider nicht so viel und probier nun schon siet stunden hier rum, aber bekomm das nicht so eingebaut, dass es überhaupt klappt und ohne fehlermeldung....
vielleicht könnt ihr mir ne kleine gedankenspritze geben...
das hier ist meine aktuelle code. mit dem ist halt der erste artikel immer anders

Ich markier dir mal die Änderungen:

PHP

<?php for ($i = 0; have_posts(); $i++ ) : the_post()?>

wird zu:

PHP

<?php $i = 0; while( have_posts() ) : the_post(); ?>

Den ganzen Code für den 1. Beitrag schmeißt du raus. ;-) Du lässt nur den else-Zweig drin (aber ohne else und endif). Diesen änderst du wie folgt:

PHP

<div id="post-<?php $i ?>" class="post">

Dann noch

PHP

<?php endfor; ?>

in

PHP

<?php $i++; endwhile; ?>

ändern und fertig.

Das ganze sieht dann so aus:

PHP

<?php get_header(); ?>


    <?php get_sidebar(); ?>


    <div id="content">


    <?php if (have_posts()): ?>
    


      <?php while( have_posts() ) : the_post(); ?>
         
         <div id="post-<?php $i; ?>" class="post">




            <p class="date2"><?php the_time('j'); ?> <b><?php the_time('M'); ?></b></p>
        
            <p class="meta"><small><?php edit_post_link('Edit', ' | ', ''); ?><br />
               <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'comments'); ?></small></p>


<?php $image = get_post_meta($post->ID, 'image_des_beitrags', true); ?>
<a href="<?php the_permalink() ?>"><img class="image_des_beitrags" src="<?php get_option('siteurl'); ?>http://www.ludk.de/pic/wpn/<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>




<div class="title5">


<h2 class="title5"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>


</div>


            <div class="entry">


<?php the_excerpt_reloaded(20, '', 'none', TRUE, '<img src="http://www.ludk.de/wordpress/wp-content/themes/asterisk/images/read.png" />', FALSE, 2); ?>


            </div>
         </div>
      <?php $i++, endwhile; ?>


        
        <div class="navigation">
            <div class="alignleft"><?php previous_posts_link('&laquo; Newer Entries') ?></div>
            <div class="alignright"><?php next_posts_link('Older Entries &raquo;') ?></div>
        </div>


    <?php else: ?>


        <h1 class="pagetitle">Not Found</h1>
        <p>Sorry, but you are looking for something that isn't here.</p>


    <?php endif; ?>


    </div>
    <!-- end content -->


<?php get_footer(); ?>

Alles anzeigen

Beim nochmaligen Durchlesen könntest du natürlich auch bei der for-Schleife bleiben. Da ist ja die Zählvariable von drin... :oops: Dann dürfte es reichen die if-Anweisung etwas aufzuräumen oder gleich ganz rauszuwerfen, und einfach statt

PHP

<div id="post-<?php the_ID() ?>" class="post">

das hier

PHP

<div id="post-<?php $i ?>" class="post">

schreiben. ;-)

cywhale

Hab schnell deine und marX' Schnipsel zusammengefügt, ein Problem war dass man ID 'post-the-ID' und class 'post-die-zahl-v-0-9', also die gleiche Form mit Kollisionsgefahr benutzen könnte. Die eindeutige Klasse habe ich hier jetzt in 'unique-post-0' bis 10 umbenannt.

Folgender Code ist nicht schön, funktionierte hier lokal aber:

PHP

<?php get_header(); ?>
<?php get_sidebar(); ?>


<div id="content">


    <?php if (have_posts()): ?>
        <?php $i=0;?>
        <?php while( have_posts() ) : the_post(); ?>
             <!-- hier dein code für den ersten eintrag-->
             <div id="post-<?php the_ID(); ?>" class="unique-post-<?php echo $i;?>">
                <p class="date"><?php the_time('j'); ?> <b><?php the_time('M'); ?></b></p>
                <p class="meta"><small><?php edit_post_link('Edit', ' | ', ''); ?><br />
                   <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'comments'); ?></small></p>


                <div class="title4">
                    <h2 class="title4"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                </div>


                <?php $image = get_post_meta($post->ID, 'image_des_beitrags', true); ?>
                <a href="<?php the_permalink() ?>"><img class="image_des_beitrags2" src="<?php get_option('siteurl'); ?>http://www.ludk.de/pic/wpn/<?php echo $image; ?>" alt="<?php the_title(); ?>" /></a>


                <div class="entry2">
                    <?php the_excerpt_reloaded(35, '', 'none', TRUE, '<img src="http://www.ludk.de/wordpress/wp-content/themes/asterisk/images/read.png" />', FALSE, 2); ?>
                </div>
            </div>
        <?php $i++; endwhile; ?>
    <?php else: ?>


        <h1 class="pagetitle">Not Found</h1>
        <p>Sorry, but you are looking for something that is not here.</p>


    <?php endif; ?>


</div>
<!-- end content -->
<?php get_footer(); ?>

Alles anzeigen

Edit: marX war schneller :)

lumo

also der code klappt, doch hab ich das gefühl, dass keiner der stilecheats mehr funktioniert. Zb: war "entry" bei mir weiß hinterlegt... jetzt ist es nicht mehr so und auch die positionierung ist nicht mehr wie vorher.
...wenn ich also zb die größe des image_des_beitrags im 2ten artikel ändern will, denn muss ich das wie anstellen? hätte jetzt gedacht, dass es mit .post-2 .image_des_beitrags {} klappt.... aber das tut es leider nicht. glaub ich mach irgendwas falsch... :(

lumo

aha ok... ha sich erledigt... unique-post muss es heißen :D

viiiiiielen lieben dank :D !!!!!
lg lumo

edit: ein kleines problemchen gibt es jetzt noch bezüglich der artikellänge. wie ja im code steht, wird jeder artikel nach 35 wörtern abgekürzt.... kann ich das nun eigentlich auch noch spezifisch feslegen oder muss ich damit leben? weil dass ja im phpcode festgelgt wird und nicht in der css...?

cywhale

PHP

<div class="entry2">
        <?php 
            $chars=( ($i==0) ? 999 : 35 );
            the_excerpt_reloaded($chars, '', 'none', TRUE, '<img src="http://www.ludk.de/wordpress/wp-content/themes/asterisk/images/read.png" />', FALSE, 2); 
        ?>
</div>

Falls es nur der erste Artikel ($i=0) sein soll der mehr Buchstaben enthalten darf ($chars=999).

Willkommen! Melden Sie sich an oder registrieren Sie sich.

jeder artikel eigenes aussehen.

Jetzt mitmachen!