Основите на една WordPress тема - част 1

Здравейте! В този пост ще обясня на кратко какво задължително трябва да има една WordPress тема, за да функционира както трябва и да изглежда добре.

Като за начало, това е моят начин, по който правя темите си. Някои разделят различните части от темата в отделни файлове, докато аз предпочитам всичко да е в два файла - основен (index.php) и сайдбар (sidebar.php). Ако на вас ще ви е по-удобно разделено, то пишете в коментарите и ще направя публикация как да "съберете" всички файлове в една тема.

Ето от какво се нуждаете като за начало:
- Правилно инсталиран WordPress.
- Програма за редактиране на текст. Аз използвам Notepad, но на практика всичко ще ви свърши работа.
- Не е задължително, но е много по-лесно, ако използвате FTP програма за качване на файловете. Ако използвате Mozzila, там има приложение наречено FireFTP, което улеснява много всичко, защото не се нуждаете от допълнителни програми и т.н., а се отваря просто като нова страница. Но вие, разбира се, можете да използвате каквото ви е най-удобно.
Ако не желаете да ползвате FTP програма, винаги можете да разчитате на контролния панел на сайта ви.

Тъй като обясняването на всяко едно нещо по отделно ще отнеме адски много време, реших да кача една по-проста тема и ще ви обяснявам по нея. Можете да свалите темата от тук.
Можете да ползвате темата като основна за вашите дизайни, но моля, давайте кредит към този сайт! В противен случай ще считам, че сте я откраднали. Също така не представяйте темата като ваша!

Файловете, които ви трябват.
- index.php - В този файл се намира основния код към темата.
- sidebar.php - Сайдбарът е страничната колонка към всяка страница.
- style.css - Тук се намират всички "ефекти" на страницата - шрифтове, цветове, фонове и т.н.

В тази публикация ще ви обясня как работи index.php. Задължително в началото трябва да имате следния код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

След това идва <head> тагът, където поставяте заглавието на сайта, пътя към style.cssи други допълнителни неща, за които ще говоря по-нататък.

След това е <body> тагът, където се намират всички основни неща на темата.
Със следния код се обозначава пътя на логото, като вие променяте името, ширината и височината спрямо вашия дизайн.

<img src="<?php bloginfo('template_url'); ?>/header.png" width="1100" height="300" border="0">

Използвам div-ове, за да обознача колко голям и от къде до къде ще е дадения прозорец, в който ще се намира текст (в случая сайдбара и новините).

Кодът по-долу въвежда сайдбара, така че никога не го пропускайте.

<?php include('sidebar.php'); ?>

А кодът по-долу е този за новините. В червено са кодовете, които въвеждат заглавието, датата, авторът, категорията, коментарите и самата публикация. Предполагам и че по имената им можете да се досетите.
Останалите кодове водят към различните ефекти по текста (цвят, шрифт, големина, сянки и т.н.), фона и цялостното оформление. Тези неща се намират в style.css и за тях ще говоря в друга публикация.

    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <div class="postingtop">
            <div class="post-title"><?php the_title(); ?></div><br/>

    <div class="posting-info"> date: <?php the_time('d.m') ?> • posted by <?php the_author() ?> • Filed Under: <?php the_category(', ') ?> • <?php comments_popup_link('no comments', '1 comment ', '% comments '); ?> </div>
    </div>
        <div class="postingcenter"><div class="content-text"><div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
    </div></div></div>
        <div class="postingbottom"></div>
                        <?php endwhile; ?>

Накрая се поставя и кода, който да води до предишни/следващи страници. Отново в червено е това, което е напълно задължително, а останалите неща са допълнителни екстри. В удебелен шрифт съм сложила текста, който ще се появява на страницата и който можете да смените както ви харесва.

    <div class='wp-pagenavi'>
        <span class='pages'>
    <div align="left"><?php next_posts_link('« Older Entries') ?></div>
    <div align="right"><?php previous_posts_link('Newer Entries »') ?></div>
        </span>
    </div>

И последния код на страницата е това, което ще се появява, ако някой отвори страница, която не съществува. На мен не ми е толкова важно как точно ще изглежда и какво ще пише и затова съм го запазила в оригинал, но ако искате, можете да го направите в отделна страница и/или да смените текста.

    <?php else : ?>

   <h2 class="center">Not Found</h2>
   <p class="center">Sorry, but you are looking for something that isn't here.</p>
   <?php get_search_form(); ?>

   <?php endif; ?>

Следващото, което трябва да промените (ако искате) е sidebar.php. Но тъй като нямам много време в момента, ще го обясня в следващата публикация. А след това ще ви обясня и малко повече за style.css.

Моля ви, кажете ми дали разбирате изобщо нещо от обясненията ми, защото това честно казано се оказва много по-сложно отколкото си мислех. И ако имате някакви предложения как би ви било по-удобно, споделете.

Целувки!

19PurpleHearts

Основите на една WordPress тема - част 1

2 коментара