شما اینجا هستید

آموزش طراحی قالب دروپال

چند روزي بود که به اين فکر مي کردم که چطور قسمت بعدي رو بنويسم که هم قابل درک باشه و هم مخصوص ورژن خاصي از دروپال نباشه.به اين نتيجه رسيدم که بهتره يکي از قالب هاي در دسترس همه رو معرفي کنم و همزمان با توضيح دادن اون مطالب رو منتقل کنم.

خوب به سراغ قالب bluemarine مي رويم ، حتما مي دونيد که اين قالب در پوشه /themes قرار داره و يکي از قالب هاي پيش فرض دروپال هست.
فايل هاي اين پوشه شامل :

bluemarine.info
همون طوري که در قسمت قبل هم معرفي کرده بودم اين فايل شامل اطلاعات قالب است.براي مطالعه در اين مورد به قسمت قبل مراجعه کنيد.

block.tpl.php
در قسمت قبل هم اشاره کردم که دروپال ابتدا به سراغ پوشه فايل های قالب مي رود و براي مکان خاص (مثلا بلاک ها ، کامنت ها ، صفحات ،....) به دنبال فايل مربوطه اون قسمت مي گردد و اگر آن را پيدا نکرد به فايل پيش فرض خودش مراجعه مي کند.
براي مثال شما مي خواهيد بلاک هايي که در سايت استفاده مي کنيد به حالت خاصي نمايش داده بشوند ، مثلا اسم بلاک، به جاي اينکه در بالاي آن ظاهر بشود در پايين بلاک نماييش داده بشود(!) اين مفهموم دقيقا همان استفاده از الگو است.
يعني شما با گذاشتن اين فايل در پوشه قالب خودتان به دروپال مي فهمانيد که براي نشان دادن بلاک ها از الگو شما استفاده کند.
(اين نکته تمام آموزش طراحي قالب دروپال است(!))
اين فايل رو باز مي کنيم.

<?php
?>

  <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
    <h2 class="title"><?php print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
</div>

همون طور که مشاهده مي کنيد اين فايل هم مانند ديگر فايل هاي دروپال ( و سايت هايي به زبان ي اج پي )شامل تگ هاي اچ تي ام ال و پي اچ پي هست.
اصلا نگران قسمت هاي پي اچ پي نباشد زيرا همه اين ها مقادير از قبل مشخص هستند و هرکسي مي تواند به راحتي از آن ها استفاده کند.

* کمي توضيح پي اج پي
هنگامي که شما در پي اچ پي از آرايه استفاده مي کنيد ،هنگام بازيابي مقداري از آرايه از -> استفاده مي شود.به اين معني که تمام اطلاعات مربوط به يک بلاک در $block قرار ميگيرد و ما براي استخراج ، مثلا محتواي بلاک از
$block->content استفاده مي کنيم.يعني مقدار محتواي اين بلاک را اينجا نشان بده (print) .

براي دانستن اين مقادير يش فرض و همه مقادير ديگه براي طراحي قالب مي توانيد اين فايل ها را دريافت کنيد.

خوب موضوع خيلي راحت شد.شما مي توانيد اين خط (خط مورد نشر شما ،مثلا خط نام بلاک ) مربوط به کد پي اچ پي را در هرجايي (از همين فايل ) قرار دهيد ، مثلا اين خط را به بالا ببريد!
** توصيه دوستانه : اگر از IDE خاصي براي پي اچ پي استفاده نمي کنيد به شما توضيه مي کنم که حتما از notepad++ استفاده کنيد.زيرا کد ها به تفکيک مدل آن ها رنگ بندي مي شوند واين کار شما را ساده تر مي کند.

(مي تونم بگم کل آموزش طراحي قالب تموم شد :))

comment.tpl.php
اين فايل ( يا بهتره از اين به بعد بگيم الگو ) الگو نمايش کامنت ها در سايت شما ست.اين فايل را باز کنيم.

<?php
?>

  <div class="comment<?php print ' '. $status; ?>">
    <?php if ($picture) {
    print
$picture;
  }
?>

<h3 class="title"><?php print $title; ?></h3><?php if ($new != '') { ?><span class="new"><?php print $new; ?></span><?php } ?>
    <div class="submitted"><?php print $submitted; ?></div>
    <div class="content">
     <?php print $content; ?>
     <?php if ($signature): ?>
      <div class="clear-block">
       <div>—</div>
       <?php print $signature ?>
      </div>
     <?php endif; ?>
    </div>
    <div class="links">» <?php print $links; ?></div>
  </div>

دقيقا مثل فايل قبل ، ولي با کمي تفاوت !اينجا نوع متغيير ها ( پي اچ پي ) با قسمت قبل تفاوت دارد.خوب اين هم طبيعيه!
ولي در کل همان مفهموم متغيير را دارد که شما مي توانيد اين ها را هرکجا باهر چيدماني قرار دهيد.

البته با دستورات if هم توجه کنيد.اين دستورات کنترل مي کنند که آن متغيير داراي مقدار هست و يا خير ، و در صورت داشتن مقدار آن ها را چاپ مي کنند.

براي مثال ما مي خواهيم زمان ارسال کامنت نمايش داده نشود.خوب خيلي طبيعي است که خط مربوط به چاپ زمان ارسال (

) را حذف مي کنيم. و چون اين متغيير ديگر در الگو ما نيست ديگر آن چاپ نمي شود.

اين ها نکته هاي هستند که با دانستن دانش اندک در مورد ماژول Theme Developer به وجود مي آيند.

*** بسيار بسيار مهم است که شما بدانيد در هرکدام از متغيير هاي دروپال چه مقداري قرار مي گيرند(البته از اسم آن ها همم مشخص است ) شما با دانلود همان فايل هايي که در چند خط بالا تر اشاره کردم مي توانيد مرجع اين ها را داشته باشد***

node.tpl.php
اين فايل داراي اندکي پيچيدگي (خيلي جزيي ) است و آن هم اين است از اين الگو در دو جا استفاده مي شود.اول به نمايش مطالب کوتاه ( همان هايي که در صفحه ابتدايي سايت من مي بينيد ) و هم به عنوان تمام صفحه ، يعني شما روي عنوان مطلب کليک مي کنيد و به متن کامل مي آييد(مثل همين جا ).
از اين فايل در اين دو حالت استفاده مي شود ولي با نوشتن فقط يک دستور if (( من از اين نکته در گذاشتن دکمه هاي +1 در صفحه ابتدايي استفاده کردم و مي تونيد نگاهي هم به اين آموزش بيندازيد.
بقيه ماجرا هم که مثل قبل است ، شما از متغير هاي پيش فرض استفاده مي کنيد و اين الگو را مي سازيد ( ويا همين فايل را تغييرات مي دهيد ) و در پوشه قالب سايت قرار مي دهيد.

page.tpl.php
در مورد اين فايل قبلا صحبت کرده ايم و شما مي توانيد در قسمت قبلي اين پست آن را مطالعه کنيد.البته اونجا موضوع به صورت خيلي کلي تر بيان شده بود که با دانشي که امروز به دست آورديد مي توانيد خيلي مفيد تر از اين فايل استفده کنيد.
(اگر توضيحات ناکافي بود در قسمت نظرات اعلام کنيد تا در يک پست به تشريح کامل اين فایل بپردازيم)

logo.png و screenshot.png
درست است که اين ها فايل هاي تصوير هستند ولي اين ها هم از قانون الگو استفاده مي کنند و فايل هاي پيش فرض هستند.
يعني اگر شما فايلي به نام logo.png در پوشه قالب خودتان داشته باشيد ، به صورت خورکار جاي لگو شما را مي نشيند.
حتما در قسمت قالب ها(admin/build/themes) ديده ايد که تصوير کوچکي از آن قالب هم در کنار آن ها قرار دارد ، فايل screenshot.png همان تصوير است.
اين طبيعيه که اگر قالب رو براي خودتان درست مي کنيد نيازي به اين فايل ها نداريد.

style.css و style-rtl.css
اين دو فايل هم در دروپال به صورت پيش فرض هستند.يعني اگر فايل هاي استايل خودتون رو به اين نام ها بگذاريد نيازي به معرفي آن ها در فايل .info نداريد.
خوب اين هم طبيعيه که فايل هايي به غيير اين نام و يا غير از همين جا ( پوشه root ) بايد معرفي شوند. در تنظیمات زبان سایت گزینه ای برای راست چسن و چ چسن بودن سایت قرار دارد.اگر شما برای زبان سایتتان از چپ به راست استفاده کنید استایل های شما از فایل style.css خوانده می شود و اگر هم زبان سایتتان را راست به چپ انتخاب کنید ، علاوه بر فایل style.css فایل های مربوط به style-rtl.css هم خوانده می شود. فایل style-rtl.css شامل استایل هایی است که قالب راست چین باید از آن استفاده کند ، مثلا راست چین کردن متن ها ، بلاک ها ، منو ها و ...

(من قبلا گفته بودم که دانشتن اچ تي ام ال سي اس اس با خود شما است ، شما حداقل بايد توانيد يک فايل ايچ تي ام ال با سي اس اس طراحي کنيد)
حالا شما مي توانيد با انتخاب يک فايل اچ تي ام ال آماده قسمت هاي مورد نظر را پاک کنيد و با گذاشتن متغيير هاي دروپال (همان متغیر های پی اچ پی که در بالا آن ها را دیدید) ،به آن اجازه دهيد که آن مقادير را براي شما تکميل کنيد. (این قسمت به تفسیر بیان می شود)

شايد هنوز بحث ما به انتها نرسيده باشه و در قسمت هايي کمبود باشه ولي الان شما مي توانيد با انتخاب خودتون بکي از قالب ها را انتخاب کنید و تغييرات مورد نظر خودتون رو اعمال کنيد.زيرا با مفاهيم قالب آشنا شديم.
البته اين کار هم خيلي بستگي به هنر سي اس اس شما دارد تا بتوانيد اون قالب رو به اون چيزي که مي خواهيد نزديک کنيد.
براي تکميل صحبت ها ، دفعه آينده با يک فيلم آموزش کو تاه مي آيم تا تمام موضوع تکميل و تحقيق بشود.
حتما به اين صفحه و اين صفحه هم سري بزنيد.البته در قسمت بعد اين ها را هم توضيح مي دهم.
غلط املایی ها و کمبود ها را بزرگی خودتا ببخشید ، اگر مطلبی نیاز با شرح بیشتر داشت در قسمت نظرات بیان کنید تا دوستان به شما کمک کنند.
يا حق
امیرحسین