Cikkajánló
Most, hogy már nem szerkesztek napi szinten a G-Portálon kevesebbszer nézem meg például a Portállistát is. De a napokban ránéztem és kíváncsi voltam a portálépítés kategóriára. Örültem is, hogy
Ez a tartalom regisztrációhoz kötött. Ha már regisztrált tag vagy, akkor a Bejelentkezés alatt tudsz belépni, ellenkező esetben regisztrálnod kell a tartalom megtekintéséhez.Regisztrált felhasználó belépéseFelhasználónévJelszó Emlékezzen rám  RegisztrációFelhasználónév*Email cím*E-mail cím újra*Honlap**Kötelezően
Már jó sokan érdeklődtetek, hogyan lehet a Coppermine Galériában lévő legfrissebb képeket megjeleníteni a WordPress-ben. Azt javaslom, hogy inkább ezt a verziót használjátok a WordPress-es bővítmény helyett, mert ha
Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme WordPress | Letöltés számláló
Előző-következő cikkek a bejegyzések alatt

Ebben a leírásban azt mutatom be, hogyan lehet megoldani kóddal, hogy a cikkek alatt megjelenjen egy-egy bejegyzés. Mégpedig az éppen olvasott cikk előtti és utáni bejegyzések. Biztos láttatok már olyat, hogy az aktuális cikk alatt megjelenik mondjuk két link a modul jobb és bal oldalán, hogy előző cikk mellette pedig, hogy következő cikk. Na, ilyet fogunk mi is készíteni, de kiemelt képpel és rövid tartalommal együtt :) Itt egy kép, hogy miről és beszélek:

 

 

Ez a kód akkor fog jól mutatni, ha a sablonban a megfelelő fájlok vannak használva. Értem ez alatt, hogy a főoldali bejegyzéseknek a home.php kell, az oldali bejegyzéseknek a page.php kell, a teljes cikkek megjelenítésének pedig a single.php kell. Azért fontos ez, mert ehhez a leíráshoz a single.php fog kelleni. Persze, ha nektek minden az index.php-ban van, akkor ez a kód is mehet oda.

 

Most pedig sorban megyünk, hogy mi minden kód kell ahhoz, hogy ez így szépen meg is jelenjen nálatok is.

 

Először a function.php fájlba kell bemásolni egy-két kódot.
Az első kód a kiemelt kép kódja: A kiemelt kép úgy van megcsinálva, hogy bármekkora képet fel lehet tölteni. A functions.php fájlban lévő kód pedig pontosan levágja akkorára, mint a mintaképeken is látható. Ha pedig később újra kell méretezni a kiemelt képeket, mert másik design-t használtok majd, akkor a functions.php fájlban át kell írni a méretezést, utána pedig ezzel a bővítménnyel a régi kiemelt képeket frissíteni kell, hogy felvehesse az új képméretet :) Ha már van ilyen kód a function.php fájlban, akkor természetesen nem kell még egyszer bemásolni! A kód forrása.

 

// kiemelt kép engedélyezése //
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'new-size', 720, 300, true );
add_image_size( 'category', 350, 260, true );
add_image_size( 'kovetkezo-cikk', 150, 150, true );
}
add_filter('image_size_names_choose', 'my_image_sizes');
function my_image_sizes($sizes) {
$addsizes = array(
"new-size" => __( "New Size"),
"category" => __( "New Size"),
"kovetkezo-cikk" => __( "New Size")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}

 

A másik kóddal pedig azt állítjuk be, hogy a szövegrészlet után azok az idegesítő kis pontocskák ne jelenjenek meg egyáltalán, ami azt jelzi alapból, hogy a szöveg folytatódik. Ha már van ilyen kód a function.php fájlba, akkor természetesen nem kell még egyszer bemásolni! A kód forrása.

 

// tovább karakter törlése //
function custom_excerpt_more( $more ) {
return ' ';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

 

És egy harmadik kódra is szükség lesz a function.php fájlba, amivel azt érjük el, hogy a sablonunk egyes fájljaiban, (pl. category.php) külön egyediben meg fogjuk tudni adni azt, hogy mennyi rövid tartalom jelenjen meg. Ami azt jelenti, hogy a rövid tartalom mennyi szót tartalmazzon. Jelen esetben ebben a kódban ez majd 40 szó lesz. A kód lényege pedig az, hogy csak is ebben a kódban lesz a rövid tartalom 40 szó. A főoldalon, ha pl. 60-at állítottatok be, akkor ott annyi is fog maradni :) A kód forrása.

 

// tartalomban mennyi szöveg jelenjen meg egyediben //
function excerpt($limit) {
$excerpt = explode(' ', get_the_excerpt(), $limit);
if (count($excerpt)>=$limit) {
array_pop($excerpt);
$excerpt = implode(" ",$excerpt).' ';
} else {
$excerpt = implode(" ",$excerpt);
}
$excerpt = preg_replace('`\[[^\]]*\]`','',$excerpt);
return $excerpt;
}
function content($limit) {
$content = explode(' ', get_the_content(), $limit);
if (count($content)>=$limit) {
array_pop($content);
$content = implode(" ",$content).' ';
} else {
$content = implode(" ",$content);
}
$content = preg_replace('/\[.+\]/','', $content);
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
return $content;
}

 

A functions.php fájlt mentsük el. Ezután nyissátok meg az index.php vagy a single.php fájlt. Ha van single.php a sablonotokban, akkor az index.php nem fog kelleni. Nekem single.php fájlom van, szóval azt nyitottam meg. Ezt az egy kis sor kódot kell oda beilleszteni, ami majd egy új fájlra fog hivatkozni, aminek a neve elozo-kovetkezo.php lesz. A kódot mondjuk tegyétek a hozzászólás űrlap fölé, úgy ahogy nálam is látható a képen, vagy oda, ahol meg fogjátok jeleníteni a cikkeket. Ezután mentsétek el a fájlt.

 

<?php include_once('elozo-kovetkezo.php') ?>

 

 

Most létre kell hozni egy új php fájlt elozo-kovetkezo.php néven. Ezt át is nevezhetitek, de akkor az egysoros kódban is át kell írni a nevét, hogy a single.php vagy index.php be tudja majd hívni az új fájlt a cikkek alá. Az új fájlba pedig beillesszük a kódot, ami megjeleníti a két linket kiemelt képpel és rövid tartalommal. A kódot akár innen is le tudjátok menteni. De mindenképpen php kiterjesztésű fájlt kell létrehoznotok! Kiemeltem azokat a részeket, ami a megjelenésért felelős. A kód többi része azért felelős, hogy egyáltalán megjelenjen a két link a cikkek alatt. A kód forrása.

 

<div class="table">
<h2>Előző, következő cikk</h2>
<?php
$prevPost = get_previous_post();
$nextPost = get_next_post();
?>
<?php $prevPost = get_previous_post();
if($prevPost) {
$args = array(
'posts_per_page' => 1,
'include' => $prevPost->ID
);
$prevPost = get_posts($args);
foreach ($prevPost as $post) {
setup_postdata($post);
?>
<div class="bal">
<div class="kovetkezo-cikk-kiemeltkep"><?php the_post_thumbnail( 'kovetkezo-cikk' ); ?></div>
<div class="kovetkezo-cikk-tartalom"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p><?php echo excerpt(40); ?></p></div>
<div class="kovetkezo-link-bal"><a class="previous" href="<?php the_permalink(); ?>"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i> Előző cikk</a></div>
</div>
<?php
wp_reset_postdata();
} //end foreach
} // end if
$nextPost = get_next_post();
if($nextPost) {
$args = array(
'posts_per_page' => 1,
'include' => $nextPost->ID
);
$nextPost = get_posts($args);
foreach ($nextPost as $post) {
setup_postdata($post);
?>
<div class="jobb">
<div class="kovetkezo-cikk-kiemeltkep"><?php the_post_thumbnail( 'kovetkezo-cikk' ); ?></div>
<div class="kovetkezo-cikk-tartalom"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<p><?php echo excerpt(40); ?></p></div>
<div class="kovetkezo-link-jobb"><a class="previous" href="<?php the_permalink(); ?>">Következő cikk <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></div>
</div>
<?php
wp_reset_postdata();
} //end foreach
} // end if
?>
</div>
<p>&nbsp;</p>

 

És már csak a CSS kód van vissza, ami a kinézetért felelős. Itt arra ügyelni kell, hogy ez a kód az én #content-emhez van igazítva, ami 720 pixel széles. Tehát elsőre lehetnek elcsúszások, amit a CSS kódban tudtok korrigálni. Mellette azzal is lehet, hogy pl. kisebb kiemelt képet használtok nem pedig akkorát, mint én. Kiemelt kép nélkül is lehet használni a kódot. Kiemeltem a CSS-ben, hogy mely értékekkel tudjátok állítani, hogy szépen egymás mellet jelenjenek meg a cikkek, mint a képen is. Vagy élőben is megnézhető, ha valamelyik cikkemre kattintotok a főoldalon :) A szélességek mellett persze a paddingok is sokat számítanak. Próbáltam mindenhol magyarul hivatkozni mindenre, hogy könnyebben lehessen a CSS-ben beállítani mindent.

 

/*single.php - cikkek alatt előző-következő cikk */
.table {
display: table;
background: #ffffff;
padding: 10px;
}
.bal {
width: 340px;
float: left;
padding: 5px;
}
.jobb {
width: 340px;
float: right;
padding: 5px;
}
.kovetkezo-cikk-kiemeltkep {
float: left;
}
.kovetkezo-cikk-tartalom {
float: right;
width: 185px;
height: 170px;
padding: 0 0 0 5px;
}
.kovetkezo-cikk-tartalom a {
text-align: left;
font-size: 12px;
color: #000000 !important;
}
.kovetkezo-cikk-tartalom p {
text-align: justify;
color: #f727272;
font-size: 11px;
line-height: 15px;
}
.kovetkezo-link-bal {
clear: both;
background: #162120;
padding: 10px;
float: left;
}
.kovetkezo-link-bal .fa { /* ez az ikon a link előtt */
color: #9BBDB9 !important;
}
.kovetkezo-link-jobb {
clear: both;
background: #162120;
padding: 10px;
float: right;
}
.kovetkezo-link-jobb .fa { /* ez az ikon a link előtt */
color: #9BBDB9 !important;
}

lindadesign Hozzászólások
220 megtekintés

Hozzászólások