Cikkajánló
Kaptam egy tippet e-mailben, hogy miről írhatnék még cikket. A felbontásbarát kinézetekről. Pontosabban annak hiányáról fog szólni a cikk, hogy a mai 21. században, amikor a netet böngészők 80%-ának
Elérkeztünk a Honlapverseny első fordulójának a végéhez. Itt azokra a honlapokra lehetett szavazni, akik nem kerültek be az első 10 közé, ami már csak 9, mert azóta egy oldal
Készítettem egy nyárias G-Portálos kinézetet. Próbálok mindig úgy kinézetet készíteni, hogy ne legyen monoton. Azt hiszem ez megint sikerült :) A téma, mint általában mindig most is ingyenes és
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ó Apró tippek weboldal szerkesztőknek
2016. augusztus. 30.
WordPress: kategória oldal létrehozása

Ez alatt a leírás alatt azt értem, mikor pl. a főoldalon egy adott kategóriára kattintotok, mert az érdekel, hogy milyen hírek, cikkek születtek már benne. Akkor is megjelenik egy oldal, ami teljesen ugyanúgy néz ki, mint a sima aloldalak, csak egymás alatt jönnek a cikkek, mint a főoldalon. Asszem sikerült jó értelmesen megfogalmaznom :D

 

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

Kapcsolódó bejegyzések

lindadesign
566 megtekintés

Előző, következő cikk

Új WordPress sablonok

Sziasztok! Volt egy kis időm, így átszerkesztettem a WordPress sablonokat. Hármat teljesen megszüntettem. Plusz másik kettő sablont pedig átkódoltam. Úgy átkódoltam, hogy sem kódolásban sem kinézetben nem hasonlít már az eredeti sablonra. De egy teljesen újat is hoztam (Lucy

WordPress: új hozzászólás űrlap

Hoztam egy hozzászólás űrlapot a WordPress használóknak :) Ha unnátok az alap űrlapot, akkor cseréljétek le erre. Kicsivel több mindent tud. Lehet avatart beállítani, nekem kinézetre is szimpatikusabb, és lehet benne egyből a hozzászólónak válaszolni, stb. Itt egy kép

 

Hozzászólások