Դե ինչ, շարունակում ենք վորդպերի թեմա ստեղծելուն նվիրված նյութերի շարքը: Նախորդ նյությում անդրադարձա նախապատրաստական փուլին, որն անելուց հետո ձեզ մոտ պետք է արդեն տեղադրված լինի լոկալ սերվերը:
Ու քանի որ աշխատելու ենք վորդպրեսի հետ, առաջին հերթին պետք է մեր լոկալ սերվերում տեղադրել հենց վորդպրեսը: Դրա համար գնում ենք վորդպրեսի պաշտոնական էջ ու քաշում վերջին վերսիան: Հիմա, եթե օգտագործում եք 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)
Այսպես բոլոր նկարների համար…
Հիմա արդեն կարող եք մտնել վորդպրեսի ադմին պանել ու ակտիվացնել թեման 🙂
Pingback:Ինչպես ստեղծել թեմա վորդպրեսի համար: Նախապատրաստական փուլ : ՀայIT.org
[…] Շարունակելի… […]
Ուրախ եմ տեղեկացնել, որ WordPress-ի պաշտոնական թարգմանությւոնը արդեն պատրաստ է և տեղակայված է wordpress.org կայքում :-) Այն համարյա ամբողջությամբ արվել է իմ կողմից, բացառությամբ continents and cities ֆայլից, որի համար ես ամբողջությամբ օգտագործեցի koreolan.org կայքում առկա թարգմանությունը։ Հուսով եմ իմանալ ձեր կարծիքը թարգմանության որակի վերաբերյալ։ Հարգանքով, Անդրեյ
Հրաշալի նորություն է, շնորհակալություն ։)