Cikkajánló
Mára is hoztam egy WordPress témát. Kivettem a WordPress témás modult a regisztráltak közül, így bárki megtekintheti vagy letöltheti azt. Egyébként hihetetlen, hogy mennyivel hamarabb össze lehet dobni egy
De most őszintén: bántottalak én valaha? Szóltam rólad bármikor is rosszat? Kibeszéltelek, szidtalak vagy mi a f*sz? Ki a fene vagy te, és mit képzelsz egyáltalán magadról, hogy csak
8. rész   Ebben a részben a column_main azaz a G-Portálon lévő középső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a középső világos színű modult. Ezt a
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
2016. szeptember. 17.
Előző-következő cikkek a bejegyzések alatt

New Yorkba vágyom rettenetesen! Persze a cikk nem erről szól, de muszáj volt kiírnom magamból. :) Tehát a cikk lényege, hogy hogyan lehet megoldani azt 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 úgy, 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:

 

 

Elsőre a WordPress-es kódok eléggé kuszának tűnnek, de ha kezditek megérteni a működését, és hogy melyik kód mire szolgál és mit is jelenít meg az oldalon, onnantól kezd egyszerűbbnek tűnnik minden. Én eleinte a kiemelt képekkel voltam bajban mivel akkor még csak az alap kódját ismertem és az valljuk be nem sok mindenre elég. De pl. az a kód, ami ebben a cikkben is benne van, az már számomra maga a tökély. :) Akármikor átállíthatom a méretét, sosem lesz pixeles vagy eldeformált, meg semmi. Persze ehhez az is kell, hogy szép nagy felbontású képeket használjunk ;) A leírása jó ideje már az oldalon is fent van itt. Vagy, hogy hol mennyi rövid tartalom jelenjen meg, stb. Sorolhatnám. Ha kicsit belemélyültök a WordPress-be, hamar meg lehet érteni a működését. És még mindig csak az alapoknál tartunk így is…

 

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

Kapcsolódó bejegyzések

lindadesign
524 megtekintés

Előző, következő cikk

WordPress: mobilbarát kinézet

Mostanra már nagyon elterjedtek a mobilok és a tabletek, így nagyon sokan ilyen készülékeken böngésznek weboldalakat. Ezért gondoltam bemutatok egy teljesen egyszerű bővítményt, amivel körülbelül 3 kattintással mobilbarát verziót is tudtok adni az oldalatoknak. Ez a cikk inkább azoknak

191 darab png kép

Sziasztok. Hoztam a galériába 191 darab új .png képet. Ebből tizenhárom darab teljesen új album, amik ezek lennének pontosan: Anne Hathaway (8 darab) • Brittany Robertson (6 darab) • Amber Heard (8 darab) • Celine Dion (3 darab) •

 

Hozzászólások