Cikkajánló
Újabb teljes kinézetet készítettem G-Portál-ra. A design átalakítható, de minden esetben kötelező a forrás feltüntetése linkelve. Ezzel együtt Emilia Clarke-os .png képek is készültek összesen 22 darab, amiket pedig
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
Leírom, hogy én hogyan szoktam telepíteni és használni egy WordPress bővítményt. Meg kell jegyeznem, hogy ezt ÉN szoktam így, biztos van olyan emberke, akik ezt máshogy oldják meg, mert
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
Kategória oldal készítése két oszlopban

Egyből az előnézeti képpel kezdek, hogy értsétek, hogy pontosan miről is van szó. :) Elég hosszúnak ígérkezik a cikk, mert megpróbálom a lehető legrészletesebben leírni. Elrontani az oldalon semmit nem lehet, mivel a category.php fájlban fogunk dolgozni. Szóval nyugodtan lehet gyakorolni ;)

 

A két oszlopos kód úgy számol, mint mikor az ember olvas. Balról-jobbra haladva lefelé, mint ahogy a minta képen is látható.

 

Ezt a kódot simán használhatjátok a főoldalon is, csak akkor nem a category.php-ba, hanem a home.php fájlba vagy az index.php-ba kell illeszteni. Vagy ha nem kategóriát használtok, hanem címkéket, akkor ne category.php fájlt, hanem tag.php-t hozzatok létre és abba tegyétek a kódokat.

 


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

 

Alapértelmezetten ha a bejegyzésekben rákattintotok az egyik kategóriára, akkor egy teljesen ugyanolyan oldal nyílik meg, mint a főoldali bejegyzések, csak a kiválasztott kategóriákkal. Most a category.php fájlnak köszönhetően átalakítjuk kicsit a kinézetet. A kinézete egyébként akár 100%-ban is eltérhet az oldalatok minden más kinézetétől. Lehet 3 oszlopba is tenni a bejegyzéseket ennek a kódnak a segítségével, nem muszáj oldalsávot behívni, stb. Menjünk sorba. Először a functions.php fájlban fogunk dolgozni. Ezeket a kódokat másoljátok bele egymás alá:

 

Kiemelt képnek – Olvassátok el!!!
Ha van már a function.php-ban kiemelt kép kód, akkor cseréljétek le erre. 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( 'category', 330, 260, true );
}
add_filter('image_size_names_choose', 'my_image_sizes');
function my_image_sizes($sizes) {
$addsizes = array(
"new-size" => __( "New Size"),
"category" => __( "New Size")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}

 

A következő kód ez lenne. Alapértelmezetten a WordPress-ben mindenki beállítja, hogy a főoldalon mennyi bejegyzés jelenjen meg. Ez minden bejegyzés oldalra érvényes, ezért ezzel a kóddal ezt felülírjuk, és ezentúl minden, ami nem főoldali bejegyzés, több cikket vagy kevesebb cikket lehet megjeleníteni. Kiemeltem a számot, amit átírhattok. A kód forrása.

 

// kategória oldalon ennyi bejegyzés jelenik meg //
function number_of_posts_on_archive($query){
if ($query->is_archive) {
$query->set('posts_per_page', 6);
}
return $query;
}
add_filter('pre_get_posts', 'number_of_posts_on_archive');

 

Most azt állítjuk be, hogy a kategória oldalon alapba ne a teljes bejegyzés jelenjen meg, hanem csak egy részlete és a továbbra kattintva jelenítse meg a teljes cikket. Kiemeltem a számot, amit átírhattok. Szavakat számol. Szóval jelenleg 46 szót jelenít meg. A kód forrása.

 

// kategória oldalon mennyi szöveg jelenjen meg //
function custom_excerpt_length( $length ) {
return 46;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

 

És végül 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 készítsünk egy tök üres .php fájl, amit category.php-nak kell elmenteni a sablonotokban a többi fájl közé (sidebar.php, index.php, stb.) !!! Az én category.php fájlomban lévő kódot innen tudjátok letölteni, ha csak simán átmásolnátok inkább mindent. Ha nem másolni fogtok, akkor arra figyeljetek, hogy minden más is legyen benne a category.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.

 

Ez a kód felel azért, hogy a bejegyzések két hasábban jelennek meg. A kód forrása.

 

<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 1) !== 0) : $wp_query->next_post(); else : the_post(); ?>
<div id="baloldal">ide jön a kategória kódja</div>
<?php endif; endwhile; else: ?>
<?php endif; ?>
<?php $i = 0; rewind_posts(); ?>
<?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 1) == 0) : $wp_query->next_post(); else : the_post(); ?>
<div id="jobboldal">ide jön a kategória kódja</div>
<?php endif; endwhile; else: ?>
<?php endif; ?>

 

Ezt a kódot egészítettem ki a kategória aloldal kódjával, aminek a forrása pedig itt van. Igazából már rá sem lehet ismerni az eredeti kódra, mert teljesen átírtam, és más CSS class kódokat adtam hozzá. Így már teljesen átlátom az egészet :)

 

És akkor itt van az átírt kód, ami attól lett két oszlopban, mert ugye be lett illesztve két helyre a kéthasábos kódban. Az egyik a div id=baloldalba, és még egyszer ugyanaz a kód pedig a div=id jobboldalba.

 

<!--dátum-->
<div class="datum">
<div class="datum-ikon"><?php the_time('Y. m. d'); ?></div></div>
<!--Bejegyzés bélyegképe -> thumbnail -> a zárójelben lévő category hivatkozik a function.php fájlban lévő kiemelt kép méretére -->
<?php the_post_thumbnail( 'category' ); ?>
<!--kategória -->
<div class="aloldal-kategoria"><?php the_category(' ');?></div>
<!--Bejegyzés címe -->
<div class="kategoria-fejlec">
<div class="kategoria-cim"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></div>
<!--Bejegyzés rövid kivonata ->  excerpt -->
<div class="kategoria-tartalom">
<div class="<?php echo $span_excerpt;?>">
<?php the_excerpt(); ?>
<!--Tovább gomb-->
<div class="tovabb"><a href="<?php the_permalink(); ?>">Tovább</a></div>
</div>
</div>

 

A teljes kész kódot ide nem másolom be, mert nagyon hosszú, de még egyszer belinkelem ide.

 

Az egész kódnak még kell egy CSS kód is, hogy szépen, rendezetten nézzenek ki a kéthasábos bejegyzések :) 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 kategória kódban pedig szintén vannak megjegyzések, ami megkönnyíti az egész kód használatát. A betűtípusokat módosítsátok vagy a Google Fonts-ban keressétek meg és szúrjátok be a header.php fájlba, amit én használtam.

 

/* kategória.php */
.baloldal {
width: 330px;
float: left;
padding: 20px 10px 5px 10px;
background: #ffffff;
}
.jobboldal {
width: 330px;
float: right;
padding: 20px 10px 5px 10px;
background: #ffffff;
}
.kategoria-fejlec {
width: 300px;
position: absolute;
background: rgba(255, 2525, 255, 0.8);
padding: 5px;
margin-top: -90px;
margin-left: 10px;
}
.kategoria-cim, .kategoria-cim a {
font-family: 'Playfair Display', serif;
font-size: 16px;
color: #8D5D51;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,.05);
}
.datum {
position: absolute;
width: 150px;
background: #DABA9B;
padding: 5px;
margin-top: -14px;
margin-left: 85px;
}
.datum-ikon {
font-family: 'Noto Sans', sans-serif;
font-size: 13px;
color: #ffffff;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,.05);
}
.aloldal-kategoria {  /* kategória, stb kinézete */
margin-top: 6px;
margin-bottom: 8px;
}
.aloldal-kategoria a, .aloldal-kategoria a:hover {  /* kategória, stb kinézete */
text-align: left;
font-size: 12px;
color: #DABA9B !important;
background: #8D5D51;
padding: 6px;
}
.kategoria-tartalom {
text-align: justify;
line-height: 21px;
width: 310px;
height: 215px;
padding: 10px;
margin-bottom: 16px;
}
.tovabb a {
background: transparent;
color: #000000;
border: 1px solid #DBDBDB;
text-align: center !important;
padding: 6px;
display: block;
width: 30%;
margin: 0 auto;
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
}
.tovabb a:hover {
background: #DABA9B;
color: #ffffff;
text-decoration: none;
}

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

Hozzászólások