Սկիզբ » Ուսումնական նյութեր » Վեբ » CMS - կառավարման համակարգեր » Ինչպես ստեղծել թեմա վորդպրեսի համար: Մաս 1: Հիմնական ֆայլերի ստեղծում

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

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

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

 

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

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

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

1

Հիմա բրաուզերով մտնում ենք 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)

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

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

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

Ինչպես ստեղծել թեմա վորդպրեսի համար: Մաս 1: Հիմնական ֆայլերի ստեղծում, 9.8 out of 10 based on 10 ratings

Նշագրեր: , , , , ,

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

Կիսվել , տարածել , պահպանել

VN:F [1.9.20_1166]
Rating: 9.8/10 (10 votes cast)

Մեկնաբանություններ (3)

Թրեքբեք հղում | Մեկնաբանությունների RSS ժապավեն

  1. Ուրախ եմ տեղեկացնել, որ WordPress-ի պաշտոնական թարգմանությւոնը արդեն պատրաստ է և տեղակայված է wordpress.org կայքում 🙂 Այն համարյա ամբողջությամբ արվել է իմ կողմից, բացառությամբ continents and cities ֆայլից, որի համար ես ամբողջությամբ օգտագործեցի koreolan.org կայքում առկա թարգմանությունը։ Հուսով եմ իմանալ ձեր կարծիքը թարգմանության որակի վերաբերյալ։

    Հարգանքով,

    Անդրեյ

Մեկնաբանեք

Կհաստատվեն միայն մեսրոպատառ հայերենով գրած մեկնաբանությունները

263