Како да направите сопствена WordPress тема

Доколку некогаш сте посакале да можете да направите сопствена тема за WordPress, или пак да ја измените постоечката, а не сте знаеле како, тогаш овој туторијал е за вас. Овде ќе се обидам на јасен начин да објаснам како да направите сопствена едноставна WordPress тема од готов HTML код која ќе поддржува виџети (widgets). За да го следите овој туторијал би требало да имате основни предзнаења од HTML/CSS и малку PHP. Но доколку немате, не се откажувајте, со малку повеќе труд сепак ќе успеете да го завршите туторијалов до крај.


Темата што ќе ја направиме можете да ја тестирате или пак да ја преземете бесплатно.

Што треба да имате подготвено?

Треба да имате инсталирано веб сервер со PHP и MySql (XAMPP или сл.) или купен веб хостинг, и да имате инсталирано WordPress. Препорачливо е да се работи локално на вашиот компјутер. WordPress можете да го преземете од WordPress.org.

Секако и вашиот дизајн преточен во HTML код.

Што е тоа WordPress тема?

WordPress тема претставува збир на PHP датотеки групирани во директориум којшто се наоѓа во /wp-content/themes. На пример темата The Test Theme би се наоѓала во директориумот /wp-content/themes/thetesttheme.

Структура на WordPress тема

Секоја WordPress тема се состои од повеќе датотеки од кои што 2 се основни и задолжителни. Кратко објаснување за секоја датотека:

  • style.css – Оваа датотека е задолжителна и во неа се сместени стиловите на темата
  • index.php – Главна датотека преку која оди вчитувањето на вашата тема
  • header.php – Опфаќа се она што сакате да се наоѓа на горниот дел од веб страната, односно во заглавјето
  • footer.php – Се она што ќе биде сместено во долниот дел
  • comments.php – Датотека која ги процесира коментарите
  • page.php – Датотека која служи за дефинирање на изгледот на страниците (pages)
  • category.php – Го дефинира изгледот на категоријата
  • single.php – Изгледот на веб страната кога се прегледува еден пост со коментарите
  • functions.php – Важни функции за функционирање на темата, како и за дефинирање на менијата и виџетите
  • и други.

Да почнеме

Една тема всушност е составена од мешавина на HTML/CSS код и PHP код. WordPress во темите користи т.н. „тагови за темплејти“ што претставуваат повици до функции од јадрото на WP и коишто генерираат динамичка содржина или пак помагаат во други функционалности.

Темата што ќе ја направиме е базирана на дизајн на Благој Капсаров (благодарност до него) и ќе ја крстиме Orange Theme. Ќе ја сместиме во папката /wp-content/themes/orangetheme во нашата WordPress инсталација.

HTML кодот на темата концепциски го разделуваме на 4 главни делови, заглавје (header.php), средишен дел (index.php), страничен дел (sidebar.php) и долен дел (footer.php).

style.css

Најпрвин ја креираме датотеката style.css во која ги пишуваме стиловите, но и некои основни податоци за нашата тема. Најгоре во датотеката ги внесуваме следните податоци:

/*
Theme Name: Orange Theme
Description: Two columns theme made for tutorial on <a href="http://list.mk">list.mk</a>
Author: Goran Mitev
Author URI: http://goranmitev.com
*/

Овие податоци се потребни за WordPress да прочита некои основни податоци за нашата тема.

header.php

Во оваа датотека го вметнуваме HTML кодот од заглавјето, и притоа заменуваме одредени елементи со WordPress тагови:


<!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" <?php language_attributes(); ?>>
      <head profile="http://gmpg.org/xfn/11">
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <?php wp_head(); ?>
    </head>

    <body>

        <div id="header">
            <div id="blogtitle">
                <h1><a href="<?php bloginfo('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
                <div class="description"><?php bloginfo('description'); ?></div>
            </div>

            <div id="navigation">
                <?php wp_nav_menu(array('container_class' => '','container'=>'','menu_class'=>'pages', 'theme_location' => 'primary')); ?>
            </div>
        </div>

        <div id="page">
            <div id="topcontent">
                <div id="intro">
                    Orange Theme - List.mk
                </div>
            </div>

index.php

Во оваа датотека го вметнуваме следниот код:

<?php get_header(); ?>

<div id="content">
<?php while (have_posts()) : the_post(); ?>
    <fieldset <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <legend align="right">
            <?php the_time('d.m.Y') ?>
        </legend>
        <h2>
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink to <?php the_title_attribute(); ?>">
                  <?php the_title(); ?>
            </a>
        </h2>

        <div class="entry">
            <?php if (has_post_thumbnail ()) { ?>
            <div class="entry-thumbnail">
                <?php the_post_thumbnail(); ?>
            </div>
            <?php } ?>
            <?php the_content('Прочитај повеќе &raquo;'); ?>            
        </div>
        <?php if (is_single()){ ?>
            <?php comments_template( '', true ); ?>
        <?php } ?>
    </fieldset>
<?php endwhile; ?>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

sidebar.php

<div class="sidebar">
    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar()) : ?>
        <div id="search" class="widget-container widget widget_search">
            <?php get_search_form(); ?>
        </div>

    <div id="archives" class="widget-container widget">
        <h3 class="widgettitle"><?php _e('Archives', 'twentyten'); ?></h3>
        <ul>
            <?php wp_get_archives('type=monthly'); ?>
        </ul>
    </div>

    <div id="meta" class="widget-container widget">
        <h3 class="widgettitle"><?php _e('Meta', 'twentyten'); ?></h3>
        <ul>
            <?php wp_register(); ?>
            <li><?php wp_loginout(); ?></li>
            <?php wp_meta(); ?>
        </ul>
    </div>
    <?php endif; ?>
</div>

footer.php

        <div id="footer">
            <p>
                <?php bloginfo('name'); ?> со годрост го користи
                <a href="http://wordpress.org/">WordPress</a>
                <br /><a href="<?php bloginfo('rss2_url'); ?>">Постови (RSS)</a>
                и <a href="<?php bloginfo('comments_rss2_url'); ?>">Коментари (RSS)</a>.
            </p>
        </div>
    </div>
<?php wp_footer(); ?>
</body>
</html>

comments.php

<div id="comments">
    <?php if (post_password_required ()) : ?>
        <p class="nopassword"><?php _e('Овој пост е заштитен со лозинка. Внеси ја лозинката за да ги видиш коментарите.', 'twentyten'); ?></p>
</div><!-- #comments -->
<?php return; endif; ?>

<?php if (have_comments ()) : ?>
    <h3 id="comments-title">
    <?php
        printf(_n('Еден коментар на %2$s', '%1$s коментари на %2$s', get_comments_number(), 'twentyten'),
                number_format_i18n(get_comments_number()), '<em>' . get_the_title() . '</em>');
    ?>
    </h3>

    <ol class="commentlist">
        <?php wp_list_comments(array('callback' => 'twentyten_comment')); ?>
    </ol>

<?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : // Are there comments to navigate through? ?>
    <div class="navigation">
        <div class="nav-previous"><?php previous_comments_link(__('<span class="meta-nav">&larr;</span> Постари коментари', 'twentyten')); ?></div>
        <div class="nav-next"><?php next_comments_link(__('Понови коментари <span class="meta-nav">&rarr;</span>', 'twentyten')); ?></div>
    </div> <!-- .navigation -->
<?php endif; // check for comment navigation ?>

<?php
    else : // or, if we don't have comments:

        /* If there are no comments and comments are closed,
         * let's leave a little note, shall we?
         */
        if (!comments_open()) :
?>
    <p class="nocomments"><?php _e('Comments are closed.', 'twentyten'); ?></p>
    <?php endif; // end ! comments_open()  ?>

<?php endif; // end have_comments()  ?>

<?php comment_form(); ?>

</div><!-- #comments -->

functions.php

<?php
add_theme_support( 'post-thumbnails' );
add_theme_support( 'automatic-feed-links' );
register_nav_menus( array(
		'primary' => __( 'Primary Navigation' ),
	) );
set_post_thumbnail_size( 568, 150, true );
register_sidebar( array(
		'name' => __( 'Primary Widget Area' ),
		'id' => 'primary-widget-area',
		'description' => __( 'The primary widget area', 'twentyten' ),
		'before_widget' => '<div id="%1$s" class="widget widget-container %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widgettitle">',
		'after_title' => '</h3>',
	) );

if ( ! function_exists( 'twentyten_comment' ) ) :

function twentyten_comment( $comment, $args, $depth ) {
	$GLOBALS['comment'] = $comment;
	switch ( $comment->comment_type ) :
		case '' :
	?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
		<div id="comment-<?php comment_ID(); ?>">
		<div class="comment-author vcard">
			<?php echo get_avatar( $comment, 80 ); ?>
			<?php printf( __( '%s', 'twentyten' ), sprintf( '<cite class="fn">%s</cite>', get_comment_author_link() ) ); ?>
            

		</div><!-- .comment-author .vcard -->
		<?php if ( $comment->comment_approved == '0' ) : ?>
			<em><?php _e( 'Your comment is awaiting moderation.', 'twentyten' ); ?></em>
			<br />
		<?php endif; ?>

		<div class="comment-body">
            <?php comment_text(); ?>
            <div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
                <?php
                    /* translators: 1: date, 2: time */
                    printf( __( '%1$s', 'twentyten' ), get_comment_date() ); ?></a><?php edit_comment_link( __( '(Edit)', 'twentyten' ), ' ' );
                ?>
            </div><!-- .comment-meta .commentmetadata -->
        </div>

        <div class="reply">
            <?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
        </div><!-- .reply -->
        <div style="clear:both;"></div>
        </div><!-- #comment-##  -->

	<?php
			break;
		case 'pingback'  :
		case 'trackback' :
	?>
	<li class="post pingback">
		<p><?php _e( 'Pingback:', 'twentyten' ); ?> <?php comment_author_link(); ?><?php edit_comment_link( __('(Edit)', 'twentyten'), ' ' ); ?></p>
	<?php
			break;
	endswitch;
}
endif;


Го дополнуваме style.css

/*
Theme Name: Orange Theme
Description: Two columns theme made for tutorial on <a href="http://list.mk">list.mk</a>
Author: Goran Mitev
Author URI: http://goranmitev.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #4A4A4A;
    color: #5B5B5B;
    font-size: 12px;
}

a{
    color: #FC8700;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
h1,h2,h3{
    margin: 1em 0;
}
h1{
    font-size: 26px;
}
h2{
    font-size: 20px;
}
legend {
    border:1px solid #E4E4E4;
    color:#B3B2B2;
    padding:5px;
    font-size:11px;
}
#page, #navigation, #blogtitle{
    width: 960px;
    margin: 0 auto;
}
#page{
    background-color: #FFFFFF;
}

#header{
    background-color:#FF8A00;
    height:170px;
}
#blogtitle{
    padding-top: 10px;
}
#blogtitle h1 a{
    color: #FFFFFF;
}

#navigation{
    background-color: #E2E2E2;
    height: 50px;
    margin-top: 20px;
}
ul.pages li, .page_item{
    float: left;
}
ul.pages li a, .page_item a{
    color:#676767;
    display: block;
    padding: 19px;
}
ul.pages li a:hover, .page_item a:hover, .current-menu-item a{
    text-decoration: none;
    background-color: silver;
    color: #F7F7F7;
}
ul li.current-menu-item a{
    color: #F7F7F7;
}

.description{
    color: #FFFFFF;
}

#topcontent{
    height: 28px;
    width: 100%;
    background-color: #676767;
    padding-top: 12px;
}

#intro{
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    margin-left: 20px;
}

#content{
    padding: 25px;
    background-color: #FFFFFF;
    line-height: 18px;
}

.entry p{
    margin-bottom: 15px;
}

#footer {
    background-color:#F6F6F6;
    border:1px solid #E4E4E4;
    clear:both;
    height:15px;
    padding:27px;
}

#content{
    width:630px;
    float: left;
}

.sidebar{
    width: 255px;
    float: left;
    background-color: #FFFFFF;
    padding: 25px 25px 25px 0px;
    line-height: 15px;
}
.widgettitle{
    background-color:#F6F6F6;
    border:1px solid #E4E4E4;
    padding:7px;
    font-weight: normal;
    font-size: 14px;
}
.widget{
    margin-bottom: 15px;
}
.widget ul{
    margin: 10px 0px 10px 20px;
    list-style-type: disc;
}
.widget ul li{
    padding: 3px 0;
}
.hentry {
    border:1px solid #E4E4E4;
    padding:0 20px 20px;
    margin-bottom: 20px;
    width:568px;
}
.entry-thumbnail{
    margin-bottom: 20px;
}
#comments{
    margin-top: 50px;
}
.commentlist{
    margin: 20px 0;
}
.comment{
    border: 1px solid #E4E4E4;
    margin-bottom: 20px;
    padding: 10px;
}
.comment-author{
    float: left;
    width: 100px;
}
.comment-body{
    float: left;
    width: 445px;
}
.comment-meta{
    margin-top: 10px;
}
.avatar{
    border: 1px solid #E4E4E4;
    padding: 4px;
}
.fn{
    font-size: 11px;
}
#commentform p{
    margin-bottom: 10px;
}

#author, #email, #url, #comment{
    border: 1px solid #E4E4E4;
    padding: 4px;
}

Заради едноставност, нема да ги изработиме останатите темплејт датотеки.

Краен резултат

Темата можете да ја тестирате или пак да ја преземете бесплатно.

 

gravatar
Автор: Горан Митев
За авторот:

Freelance PHP програмер којшто професионално работи развој на комплексни веб апликации, CMS решенија, Е-Бизнис решенија, Wordpress. повеќе >>

3 Коментари

  1. […] воведување на HTML5Еротско промовирање на ИнтернетКако да направите сопствена WordPress темаМодерна студена војна, Google против Facebook во преземање […]

  2. […] и притоа да биде сватен со сериозност, а не знае да изработува веб страни тогаш слободно препорачувам користење на Modest […]

  3. […] и притоа да биде сватен со сериозност, а не знае да изработува веб страни тогаш слободно препорачувам користење на Modest […]