Ինչպես ստեղծել թեմա վորդպրեսի համար: Մաս 1: Հիմնական ֆայլերի ստեղծում

Դե ինչ, շարունակում ենք վորդպերի թեմա ստեղծելուն նվիրված նյութերի շարքը: Նախորդ նյությում անդրադարձա նախապատրաստական փուլին, որն անելուց հետո ձեզ մոտ պետք է արդեն տեղադրված լինի լոկալ սերվերը:

Ու քանի որ աշխատելու ենք վորդպրեսի հետ, առաջին հերթին պետք է մեր լոկալ սերվերում տեղադրել հենց վորդպրեսը: Դրա համար գնում ենք վորդպրեսի պաշտոնական էջ ու քաշում վերջին վերսիան: Հիմա, եթե օգտագործում եք Denwer-ը, ապա ձեր համակարկչում պետք է նոր հարդ դիսկ ստեղծված լինի, հենց այդտեղ էլ գտնվում է դենվերը: Մտնում ենք ստեղծված  hard disk/home/localhost/www/ ու տեղ ենք քցում քաշած վորդպրես պապկեն (.zip ֆայլի միջինը):

Միանում ենք տվյալներ բազային

Հիմա պետք է ստեղծենք նոր օգտատեր, տվյալների բազային կպնելու համար: Դրա համար նախ և առաջ միացնում ենք դենվերը (դեսկթոփի վրա գտնվող Start Denwer-ի վրա սեղմելով), բացում ենք ցանկացած բրաուզեր ու հասցեի դաշտում գրում http://localhost/tools/phpmyadmin

Բացվում է phpmyadmin-ը, որտեղից մտում ենք Users->Add User : Գրում ենք անհրաժեշտ ինֆորմացիան,ինջնում ներքև ու Global privileges-ի մոտ սեղմում ենք Check All, որից հետո Add User:

Հիմա բրաուզերով մտնում ենք http://localhost/wordpress/ ու ինսթալ անում վորդպրեսը: Եթե չգիտեք ինչպես, ապա ինտերնետում շատ հեշտությամբ բազմաթիվ վիդեոդասեր կգտնեք: Այնպես որ, այդ մասին չեմ խոսի:

Իսկ հիմա արդեն ժամանակն է սկսել թեմայի ստեղծումը: Ինչպես արդեն նշել եմ, ես օրինակները կբերեմ նախորդ նյութում ասված HTML  շաբլոնի վրա, սակայն կարող եք օգտագործել ցանկացած այլ շաբլոն:

 Թեմայի հիմնական ֆայլերը

Նախ նշեմ, որ ցանկացած վորդպրեսի թեմա պետք է բաղկացած լինի առնվազն 2 ֆայլից.

• index.php
• style.css

Սա այն հիմնականն է, առանց որի թեման չի կարող աշխատել, սակայն հիմնականում օգտագործվում են բազմաթիվ այլ ֆայլեր, ինչպիսին են

• header.php
• footer.php
• functions.php
• comments.php և այլն…

Այդ ֆայլերից մեծ մասին կանդրադառնանք այս և հաջորդ նյութերի ընթացքում, իսկ հիմա անեցնեք գործի…
Ուրեմն բացում ենք ներբեռնած շաբլոնի .zip արխիվը ու միջի պապկան քցում ենք ստեղծված  hard disk/home/localhost/www/wordpress/wp-content/themes պապկայի մեջ:Մեզ անհրաժեշտ է միայն index.html ֆայլը և js, css, images պապկաները: Մնացածը կարող եք ջնջել:

Բացում ենք index.html ֆայլը ցանկացած տեքստային խմբագրիչով ու Save as ենք անում ընտրելով .php ֆորմատը, որից հետո index.html  ֆայլի կողքին պետք է ունենքն index.php ֆայլը:HTML ֆայլը կարող եք ջնջել:

Ավելացնում ենք թեմայի մասին ինֆորմացիան  և միացնում օգտագործվող ֆայլերը

Հիմա պետք է ավելացբել մեր թեմայի մասին ինֆորմացին, առանց որի վորդպրեսը պարզապես չի ճանաչի այն, հետևաբար չեք կարող թեման օգտագործել: Դրա համար css պապկայի մեջ գտնվող .css ֆայլի  (վերանվանեք այն style.css) ամենավերևի մասում ավելացնում ենք հետևյալ մեկնաբանություննրը, համապատասխան տողերում նշելով ինֆորմացիան, որից հետո հանում ենք այն css պապկայի միջից և գցում index.php-ի կողքին:

/*
Theme Name: Թեմայի անունը
Theme URI: Թեմայի հասցեն
Author: Հեղինակը
Author URI: Հեղինակի հասցեն
Description: Նկարագրություն
Version: 1.0
License: CCA 3.0 license
License URI: http://creativecommons.org/licenses/by/3.0/
Tags: white, blue, right-sidebar,drop-down menu, theme options page
*/

Հիմա անհրաժեշտ է գլխավոր էջում միացնել css և javascript ֆայլերը: Դրա համար օգտագործելու ենք վորդպրեսի get_template_directory_uri() ֆունկցիան: Ավելացնում ենք այն ֆայլերի ուղիներին PHP-ի echo հրամանի միջոցով,որը տպում է տվյալ ֆունկցիայի արժեքը: Այսինքն պետք է տեղեդարենք <?php echo get_template_directory_uri(); ?> կոդը հետևյալ կերպ:

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/style.css" />
<script>window.jQuery || document.write('<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.6.1.min.js"><\/script>')</script>

Կոդը բաժանում ենք մասերի

Ժամանակն է ամբողջ կոդը բաժանել մի քանի մասի, որոնք կտեղակայվեն հետևյալ ֆայլերում.

• index.php
• header.php
• sidebar.php
• footer.php

Դրա համար պետք է առաջին հերթին ստեղծել վերջին 3 ֆայլերը (առաջինն արդեն ունենք), որից հետո index.php -ի կոդերը տեղափոխում ենք են մյուսների մեջ: Ֆայլերի անունները արդեն իսկ հուշում են, թե կոդի որ հատվածը պետք է պարունակեն իրենց մեջ: Մի փոքր ուսունասիրելով HTML կոդերը շատ հեշտ է հասկանալ, որ header.php-ի մեջ պետք է լինի հետևյալ հատվածը.

<!DOCTYPE html>
<!--[if IE 7 ]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <meta name="description" content="">
    <meta name="author" content="">

    <title>CoolBlue</title>

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/style.css" />
    <!--[if lt IE 9]>
	    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-1.6.1.min.js"><\/script>')</script>
    <script src="js/scrollToTop.js"></script>

</head>

<body id="top">

<!--header -->
<div id="header-wrap"><header>

 	<hgroup>
        <h1><a href="index.html">Coolblue</a></h1>
        <h3>Just Another Styleshout Template</h3>
    </hgroup>

    <nav>
		<ul>
			<li id="current"><a href="index.html">Home</a><span></span></li>
			<li><a href="style.html">Style Demo</a><span></span></li>
			<li><a href="blog.html">Blog</a><span></span></li>
			<li><a href="archive.html">Archives</a><span></span></li>
			<li><a href="index.html">Support</a><span></span></li>
			<li><a href="index.html">About</a><span></span></li>
		</ul>
	</nav>

    <div class="subscribe">
        <span>Subscribe:</span> <a href="#">Email</a> | <a href="#">RSS</a>
    </div>

   <form id="quick-search" method="get" action="index.html">
      <fieldset class="search">
         <label for="qsearch">Search:</label>
         <input class="tbox" id="qsearch" type="text" name="qsearch" value="Search..." title="Start typing and hit ENTER" />
         <button class="btn" title="Submit Search">Search</button>
      </fieldset>
   </form>

<!--/header-->
</header></div>

sidebar.php-ին հետևյալ կոդը(ջնջված են ոչ անհրաժեշտ կոդերը).

<!-- sidebar -->
        <div id="sidebar">

      	    
        <!-- /sidebar -->
	</div>

    <!-- content -->
	</div>

<!-- /content-out -->
</div>

Իսկ footer.php-ին սա(ջնջված են ոչ անհրաժեշտ կոդերը).

<!-- extra -->
<div id="extra-wrap"><div id="extra" class="clearfix">

<!-- /extra -->
</div></div>

<!-- footer -->
<footer>

	<p class="footer-left">
		© 2011 Copyright Info      
		Design by <a href="http://www.styleshout.com/">styleshout</a>
	</p>

	<p class="footer-right">
	   	<a href="index.html">Home</a> |
		<a href="index.html">Sitemap</a> |
		<a href="index.html">RSS Feed</a> |
        <a href="#top" class="back-to-top">Back to Top</a>
    </p>

<!-- /footer -->
</footer>

</body>
</html>

Ավելացնում ենք հիմնական ֆունկցիաները

Այժմ անհրաժեշտ է այս բոլոր ֆայլերը կանչել index.php-ում: Դրա համար օգտագործում ենք վորդպրեսի ֆունկցիները.

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Առաջի կոդը դնում ենք ամենավերևում, իսկ 2-րդ ու 3-րդը ամենավերջում: Շատ կարևոր է կանչերը կատարել ճիշտ հերթականությամբ, մեր թեմայի դեպքում այն ունի այս հերթականությունը, սակայն կարող է նաև տարբեր լինել այլ թեմաներում:

Մի քանի մանրուք էլ…

Եվ որպեսզի թեման ամբողջովին աշխատի, անհրաժեշտ է փոփոխել շաբլոնում օգտագործվող նկարների հասցեները, որոնք գտնվում ենք css ֆայլի մեջ:

 background: url(../images/tag.png)  պետք է լինի
 background: url(images/tag.png)

Այսպես բոլոր նկարների համար…

Հիմա արդեն կարող եք մտնել վորդպրեսի ադմին պանել ու ակտիվացնել թեման 🙂

Շարունակելի…

Նշագրեր: css, html, հտմլ, վոդրպրես, վորդպրես թեմա, վորդպրես ֆունկցիաներ

Բաժին: CMS - կառավարման համակարգեր, HTML և CSS, PHP, Թեյնիկներին, Վորդպրես