10 начина да измените своју Вордпрес тему

WордПресс-Тwеакс-260

Вордпрес (енгл. WordPress) је CMS платформа која убедљиво најбрже расте у данашњој веб-дизајн индустрији. Добар део акција које се дешавају у Вордпрес заједници су углавном покренуте тржиштем Вордпрес тема.

Широк избор бесплатних и комерцијалних тема је управо једна од ствари које чине Вордпрес тако атрактивним за коришћење. Али тема је често само почетна тачка ка даљим прилагођавањима. Веб-девелопери и власници веб-сајтова воле да почну са неком темом, а онда да је даље прилагођавају својим потребама док не дође до жељеног изгледа или док не удовоље жељама клијента.

Многе теме, нарочите оне које су комерцијалне, долазе упаковане са јасном страном са опцијама везаним за ту тему, која вам дозвољава да конфигуришете већину аспеката. Најбоље је да погледате све опције које ту постоје пре него што “зароните” у код. Другачије речено, свака тема ја различита од друге, па понекад морате да заврнете рукаве и уђете у код како би је потпуно прилагодили својим потребама.

У наставку текста наведене су ствари које власници веб сајтова воле да мењају и наравно како се те промене раде! Овај чланак је писан под претпоставком да имате бар почетно знање веб-дизајна, едитовања кода и да сте упознати са Вордпрес платформом.

Један савет пре него што кренете у детаље: Често је добра идеја да модификације пре радите на “Детету теми (енгл. child theme)”  него на “Теми родитељу (енгл. parent theme)”. Предност овог поступка је у томе што када аутор теме објави ажурирање своје теме можете је лако update-овати, а да не изгубите модификације које сте направили. Погледајте WordPress.org Codex за више информација о “Child темама”.

1. Едитовање CSS-а теме

фиребуг1

Ако желите да мењате боје, фонт, layout, позадине, spacing и друге визуелне елементе најбоље је да почнете са едитовањем CSS-а. У највећем броју случајева стилови које користи ваша тема се налазе у фајлу под називом style.css. Овај фајл се увек налази у теми, јер овај фајл дефинише тема у Вордпресовом админ делу. Понекад се ту налазе и неки додатни  стилови, који могу да се налазе у подфолдерима.

Најбољи начин да пронађете стил који треба да измените и локацију стила у фајловима теме јесте да инсталирате алат за веб development, као што је рецимо FireBug.  Ово је додатак за Firefox који вам омогућава да прегледате CSS у лету и да брзо лоцирате стил и линију коју треба да промените. Ако не користите FireBug, време је да почнете.

2. Приказати одломак поста или цео садржај

Понекад, по дифолту (енгл. default), ваша тема приказује комплетан садржај постова на почетној страни. Рецимо да бисте радије приказали кратак одломак, чисто да привучете интересовање читалаца како би кликнули даље и погледали цео текст. Или можда обрнуто – тема показује одломке, а ви бисте радије одмах све приказали.

Ево два тага (енгл. tag) које треба да замените:

Овај таг приказује цео садржај постова:

<?php the_content(); ?>

Више информација о овом тагу.

Овај таг приказује одломак поста (када едитујете пост, то је текст који уносите у текст box-у одмах испод текст bоx-а за садржај целокупног поста):

<?php the_excerpt(); ?>

Ако никакви изузеци нису намештени аутоматски ће приказати првих пар реченица вашег поста.

Више информација о овом тагу.

3. Креирајте свој темплејт (енгл. template) за одређену страну

Дешава се да је потребно да креирате одређену страницу која мора да има свој посебан layout— нешто другачије од других.  Желели бисте мало флексибилности у HTML коду, али да промене које унесете не утичу на друге стране које већ постоје на вашем сајту. Вордпрес чини да креирање јединствених темплејта и додељивање истих одређеној страни буде поприлично лако. Ево како:

    1. Направите копију фајла page.php који се налази у вашој теми.  Ово је фајл који Вордпрес користи да прикаже стране.
    2. Промените име копији у које год желите.  У овом примеру назваћемо га, cene.php (направићемо јединствену страну за приказ цена).
    3. На врху стране додајте овај део кода:

<?php
/*
Template Name: Cene
*/
?>

  1. Модификујте html код и CSS за ову страну како год желите.
  2. Направите у оквиру Вордпреса страну са називом “Цене”. Користећи падајући мени за избор темплејта изаберите “Цене”.
  3. Снимите страну.  Сада ће се страна приказивати користећи темплате који сте креирали.

4. Направите луп (енгл. loop): Искључење/Укључење категорије

Рецимо да желите да прикажете постове из свих категорије осим из једне. Ово је јако чест захтев из разних разлога. Један пример би био да имате истакнуте постове у облику слајдера на почетној страни који приказује постове из категорије “Истакнуто”. Желели бисте да прикажете постове и испод слајдера, али тако да не укључите у том приказу постове из категорије “Истакнуто”, јер би се у том случају дуплирали на страни. Ево како то да урадите:

Додајте ову линију пре лупа:

<?php query_posts(‘cat=-8′); ?>

Ово ће искључити из приказа све постове који су из категорије са ИД-јем 8. Дакле неопходно је да знате ИД категорије коју желите да искључите што можете видети у админ делу сајта за администрацију категорија.

Можда желите да урадите обрнуто: Приказ постова само из одређене категорије. Просто! Склоните ” – ” пре ИД-а ваше категорије:

<?php query_posts(‘cat=8′); ?>

Више информација о Лупу и Query Post-овима.

5. Сецкање навигације на лакши начин

навигатион

Многе теме приказују све ваше стране на врху сајта уз помоћ падајућег менија или хијерархијске навигације. Али рецимо да желите да избегнете неке стране у навигацији. Понекад ћете имати стране које нема потребе да буду одмах изложене, као што су на пример “Услови коришћења”. Ево лакшег начина да искључите одређену страну из приказа у менију. Пронађите код који приказује листу страна:

<?php wp_list_pages(); ?>

Промените је у:

<?php wp_list_pages(‘exclude=5′); ?>

На овај начин кажете Вордпресу:”Излистај ми све стране које сам направио осим оне која има ИД 5.”. Наравно не морате да изговорите то на глас, довољна је ова линија кода :). Као и у претходном случају са категоријама и овде морате знати ИД стране коју желите да искључите.

Више информација: WP List Pages

6. Укључивање menu managment-а у Вордпресу

Да ли желите да имате комплетну контролу над навигацијом на вашем сајту као што је на пример намештање вашег жељеног редоследа, укључивање/искључивање страна, категорија и екстерних линкова? Ко не би? Вордпрес од верзије 3.0 доноси једну кул нову опцију названу “Menus”, која вам даје ову флексибилност. Међутим, ову опцију можете користити само ако ваша тема подржава исту.

Ево како да промените традиционалну навигацију – коришћењем wp_list_pages(); у нову која може да се контролише из админ дела.

НАПОМЕНА: Морате имати Вордпрес 3.0+.

Прво, морате да укључите ову могућност додавањем следеће линије кода у functions.php фајл:

<?php add_theme_support(‘nav-menus’); ?>

Након тога додајте свој мени у тему, негде у header.php фајлу:

<?php wp_nav_menu(); ?>

Наравно, мораћете да креирате и свој мени тако што одете у Appearance > Menus.

Више информација: WP Nav Menu

7. Направите једноставан IF

Понекад бисте желели да се неки део садржаја мења у зависности од тога коју страну корисник гледа. На пример, када корисник гледа страну “Цене”, желите да вам се са стране прикаже порука “Цене за сваки буџет”, али на свим другим странама бисте уместо те поруке приказали “Квалитетни производи, поуздана услуга!”.

Ево начина да ово наместите користећи IF:

<?php if ( is_page(‘Цене’)) { ?>

<p>Цене за сваки буџет!</p>

<?php } else { ?>

<p>Квалитетни производи, поуздана услуга!</p>

<?php } ?>

Више информација: Conditional Tags

8. Post thumbnails

тхумбнаилс

Вордпрес 2.9 је увео једну згодну опцију названу “Post thumbnails”.  Као што име каже, дозвољава вам да подесите thumbnail слику свом посту, без потребе да дефинишете custom поље или да слику убацујете у садржај поста.

НАПОМЕНА: У Вордпресу 3.0, овој опцији је промењено име у “Featured Image”, али је функционалност остала иста.

Post thumbnails је корисна опција за убацивање боја у листу ваших постова или ако користите Вордпрес постове као свој портфолио. Постоји још доста других ситуација када thumbnail-ови ступају на сцену. Ево како можете ову опцију да укључите у својој теми:

Као и са опцијом menus, Post thumbnails се мора укључити у теми. Додајте ову линију кода у functions.php фајл:

<?php add_theme_support( ‘post-thumbnails’ ); ?>

Онда, унесите post thumbnail слику у оквиру лупа,користећи следећи таг:

<?php the_post_thumbnail(); ?>

Можда ћете желети да дотерате изглед користећи CSS.  Можете такође додати могућност различитих величина и опцију за сечење слика.  Погледајте овај туторијал о опцији Post Thumbnail за више информација.

9. Додавање садржаја на крају поста

У неким ситуацијама ћете пожелети да додате нешто на крај сваког поста — нешто константно, рецимо поруку промоције ваших сервиса, линк ка пријави за newsletter, неку рекламу и сл.

Фајл који желите да едитујете је single.php.  Ово је темплејт који приказује чланке на блогу. Отворите тај фајл и пронађите згодно место да додате жељени садржај. Добро место је обично испод чланка, али пре коментара:

<?php the_content(); ?>

Ваш додатни садржај…

<?php comments_template(); ?>

Ваша тема би могла да има у додатне тагове или шта већ, али ово ће вас упутити у правом смеру.

10. Додавање Google Analytics кода

гоогле-аналyтицс

Сви желе да знају колико људи долази на сајт који поседују. Google Analytics је најпопуларнији алат за праћење посете на вашем сајту. Намештање Google Analytics-а је веома лако. Када направите свој бесплатан налог Google ће вам приказати неколико линија кода који би требало да сместите на свој сајт.

До скоро се користио традиционални Analytics код који се смештао при дну стране тј. пре самог затварања body дела односно пре </body> тага. То место се налази у footer.php фајлу.

Сада се користи нови тзв. Асинхрони код који се додаје пре затварања head дела тј. пре </head> тага. Нови начин праћења посете је далеко ефикаснији и тачнији.

ПРИЈАВИТЕ СЕ ЗА НАЈНОВИЈЕ ТЕКСТОВЕ СА НАШЕГ БЛОГА!

Tags: , ,

Нема коментара.

Пошаљи коментар