Cikkajánló
Már is belevágok a közepébe. Remélem kisebb kárpótlás lesz ez a segítség sorozat, ha már az oldalam költöztetése miatt nem igazán maradt időm frissítéseket is hozni. Egy pár design
Amióta használok kiemelt képeket az oldalon azóta foglalkoztatott a dolog, hogy lehetne azt megcsinálni, hogy a képeket lehessen méretileg alakítani és ne kelljen esetleg törölni őket. Ezzel a megoldással
Ez a cikk kérésre született meg, de valószínű előbb-utóbb magam is írtam volna róla, mert sajnos nagyon sok olyan szerkesztő van, aki valamilyen módon, de nagyon irritáló tud lenni.
Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák Maisie Williams G-Portálos téma
Főoldali hírek rövid tartalommal, kiemelt képpel

Egyből az előnézeti képpel kezdek, hogy értsétek miről is van szó. Az a lényeg, hogy ezekkel a kódokkal azt lehet elérni a főoldalon, hogy ugyanúgy egymás alatt jelennek meg a cikkek, viszont csak egy része. A teljes cikket pedig akkor lehet elolvasni, ha valaki rákattint a Tovább linkre. Nem sokan használtok rövid tartalmat az oldalatokon, sem itt sem G-Portálon. De én azt tanácsolom, hogy kezdjétek el használni a rövid tartalmakat. Sokkal szebb oldalakat lehet így készíteni és maga az oldal is hamarabb betölt, ha valaki ellátogat hozzátok. Plusz így a főoldalon sokkal több cikket is meg tudtok jeleníteni egyszerre, nem csak 3-6 darabot. Persze ezt mindenki maga dönti el, én csak javasoltam.

 

Ajánlatos pl. a Notepad program használata tanulás közben. Oda bemásolod a kódot és mindent már is szebbnek lehet látni benne és persze sokkal áttekinthetőbb az egész. Innen le tudod tölteni: letöltöm

 


Teljes méretért kattintsatok a képre!

 

A kódokat a home.php fájlba kell illeszteni. Ha nincs home.php fájl, akkor hozzatok létre egyet és oda tegyétek majd bele. Az index.php fájlba is tehető a kód, mert akinek nincsen a sablonjában home.php fájl, annak automatikusan az index.php fog betöltődni. Ez egy úgynevezett “segéd fájl”, amiről itt már bővebben is írtam.

 

Először a kiemelt kép kódját cseréljétek le a function.php fájlban. 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 :)

 

// 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', 700, 300, true );
add_image_size( 'home', 350, 260, true );
}
add_filter('image_size_names_choose', 'my_image_sizes');
function my_image_sizes($sizes) {
$addsizes = array(
"new-size" => __( "New Size"),
"home" => __( "New Size")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}

 

Ezzel 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. Mi a cikk alá egy tovább buttont fogunk tenni.
A kód forrása.

 

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

 

A functions.php fájlt mentsük el. Ez után a home.php fájlban dolgozunk. De ha ti maradtok inkább az index.php fájlnál, akkor abban dolgozzatok. Itt az én home.php fájlom tartalma, ha inkább az egészet simán csak kimásolnátok. Ha nem másolni fogtok, akkor arra figyeljetek, hogy minden más is legyen benne a home.php fájlban, ami behívja a fejlécet, oldalsávot és láblécet is! És persze a lapozótokat se felejtsétek el! Ha az én kódomat használjátok, akkor se felejtsétek a lapozó részben átírni a kódot a ti lapozótokra, mert én nem bővítménnyel lapozok, így kicsit más a kódom.

 

Részletesebben a home.php fájlban lévő kódokról

 

Ez a rész alapértelmezetten benne kell, hogy legyen. Behívja a fejlécet, oldalsávot, főmodult és a tartalmát is.

 

<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>">

 

A következő kód a rövidített bejegyzés kódja. Benne van a kiemelt kép, cikk írója, dátum, tovább gomb, a hír rövid kivonata, stb. Ezt a CSS-ben lehet állítani, hogy hogyan is nézzen ki. A kódban van magyarázat is. Használjátok a FontAwesome kódját a WordPress-ben, ha még nem alkalmazzátok, mert itt a kódban úgy van megcsinálva, hogy az ikonok is láthatóak. Ahogy a képen is látjátok.

 

<!--Bejegyzés címe -->
<div class="blogcim"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<!--Bejegyzés bélyegképe -> thumbnail -> a zárójelben lévő home hivatkozik a function.php fájlban lévő kiemelt kép méretére -->
<div class="kiemelt-kep"><?php the_post_thumbnail( 'home' ); ?></div>
<!--dátum cikkíró hozzászólás linkek -->
<div class="bloginfo"><i class="fa fa-calendar" aria-hidden="true"></i> <?php the_time('Y. m. d.') ?> &nbsp; &nbsp;<i class="fa fa-user-circle" aria-hidden="true"></i> &nbsp;<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a> &nbsp; &nbsp;<i class="fa fa-comments-o" aria-hidden="true"></i> <?php comments_popup_link('0', '1', '%'); ?>  Hozzászólás</div>
<!--Bejegyzés rövid kivonata -->
<div class="blogtartalom">
<div class="<?php echo $span_excerpt;?>">
<?php echo excerpt(65); ?>
<!--Tovább gomb -->
<div class="tovabb"><a href="<?php the_permalink(); ?>">Tovább</a></div>
</div>
</div>
</div>
<p>&nbsp;</p>

 

Ezt a két kódot kiemelném. Az egyik a cikk írója kódja. Én egy hosszabb kódot illesztettem be, ami arra jó pl., hogy ha van olyan oldal, ahol több a szerkesztő és többen írnak cikkeket, akkor ezzel a kóddal külön lehet linkelni, hogy melyiket ki írta. Ha rákattintotok a cikk írója nevére, akkor kihozza azokat a cikkeket, amiket csak ő írt meg. Ezért ez a kód hosszabb a hagyományosnál.

 

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>

 

A másik kód pedig a hozzászólás linkje. Itt cserélhetitek a kódot arra a linkre, amit ti használtok a sablonotokban.

 

<?php comments_popup_link('0', '1', '%'); ?>  Hozzászólás

 

Ami még kiemelendő, az ez a része a kódnak. Itt lehet azt beállítani, hogy mennyi karakter jelenjen meg a rövidített bejegyzésben. Kiemeltem a számot, hol kell átírni.

 

<!--Bejegyzés rövid kivonata -->
<div class="blogtartalom">
<div class="<?php echo $span_excerpt;?>">
<?php echo excerpt(65); ?>
<!--Tovább gomb -->
<div class="tovabb"><a href="<?php the_permalink(); ?>">Tovább</a></div>
</div>
</div>

 

Ez pedig a home.php vagy index.php vége. Jelen esetben a lapozó van benne és a lábléc. Meg az egész lezáró DIV-je.

 

</div>
<p>&nbsp;</p>
<?php endwhile; else: ?>
<?php endif; ?>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="lapozo">
<?php wp_pagination(); ?>
</div>
<p>&nbsp;</p>
<?php get_footer(); ?>

 

És az egészhez tartozó CSS kód
Itt azt meg kell jegyeznem, hogy ez a teljes kód az én minta oldalam szélességéhez van igazítva (#content), ami 720px széles. Így ha nektek keskenyebb vagy szélesebb a főmodul (#content), akkor elsőre lesznek elcsúszások a bejegyzésekben. Ez elkerülhetetlen. A CSS kódban kiemeltem azokat az adatokat, amivel be tudjátok állítani, hogy nálatok is tökéletes lehessen a két oszlop. A kiemelt képek méretét a function.php-ban is úgy kell megadni, hogy az beleférjen a főmodulotokba. Erre példa: Nekem 720 pixel széles a főmodul. A kis kiemelt képek szélességét 350px-re állítottam be. Így még marad 370 pixel szélességünk. Ezért a blogtartalmat 350 pixel szélesre állítottam, mivel ehhez hozzájön még 10-10 pixel üres hely a két szélére. Maga a cím sáv is azért lett 700 pixel széles, mert 10-10 pixelt ott is rá kell számolni a két szélére. És így jön ki a 720 pixel: 350px a kiemelt kép + 350px a rövid tartalom rész + kétszer 10px a tartalom két szélén az üres rész.

 

A CSS kódot pedig a style.css fájlba kell bemásolni. Minden class kódot magyarul írtam, szóval elvileg simán ki lehet benne igazodni. A kinézetet úgy is megcsinálhatjátok, hogy a kiemelt kép van bal oldalon és a cikk a jobbon. Ez már részletkérdés ;)

 

/* főoldal modulja */
.kiemelt-kep {
float: right;
width: 350px;
height: 260px;
}
.blogcim {
background: #00899B;
padding: 10px;
width: 700px;
text-align: center;
}
.blogcim a {
color: #ffffff !important;
}
.bloginfo {
font-size: 12px;
background: #D6D6D6;
text-align: center;
color: #000000;
padding: 5px;
width: 360px;
float: left;
}
.bloginfo a {
font-size: 12px;
color: #FF703E;
}
.bloginfo .fa { /* az ikonok kinézete */
font-size: 12px;
color: #000000 !important;
font-style: normal !important;
font-weight: normal !important;
}
.blogtartalom {
float: left;
background: #ffffff;
text-align: justify;
color: #000000;
padding: 10px 10px 0 10px;
height: 224px;
width: 350px;
}

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

Hozzászólások