کار با Header Template (بخش ۲)

در این پست بخش پنجم از این سری آموزشی را پی خواهیم گرفت . این درس ادامه ی درس قبلی است. باز هم می گویم که اگر این سری را از ابتدا دنبال نکرده اید، از همین الان از طریق این پست درس اول و تمامی دروس قبلی را مطالعه کرده و سپس با ما همراه شوید. در ضمن از خودتان مطمئن شوید که دروس قبلی را خوانده و فهمیده اید(اگر کمی نیز کار کرده باشید که دیگر عالی است)

درس امروز ما آنچنان طولانی نیست ولی با بعضی از مهمترین تگ های بکار رفته در پوسته های وردپرس آشنا خواهید شد. با پایان پست امروز بخش header template به پایان می رسد، و در جلسات بعدی با بدنه اصلی و ساختار حلقه بیشتر آشنا خواهیم شد . اگر آماده اید درس را شروع کنیم….

از آنجایی که صفحه کمی طولانی می شود ، متن کامل پست را در ادامه مطلب مطالعه فرمایید.

نکته: به هیچ عنوان کدهایی که به شما گفته می شود را کپی و Paste نکنید و خودتان آنرا را تایپ کنید.

● مرحله ی  اول:

۱- برنامه ی Xampp را فعال کنید.
۲- فولدر پوسته هایتان ، که نامش را Tutorial  گذاشته اید را باز کنید
۳- یک مرور گر وب باز کنید و در آن آدرس http://localhost/wordpress را تایپ کنید.(دلیل قرمز بودن wordpress را در جلسات گذشته گفته ایم).
۴- به فولدر پوسته بازگردید و فایل index.php ر ادر notepad باز کنید.

بعد از انجام مقدمات کار مرحله ی بعدی و یا اصل درس را شروع می کنیم:

● مرحله دوم :

درون فایل index.php باید عبارت زیر را که از جلسه ی قبل کار کرده ایم، وجود داشته باشد:

<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

حال به دور عبارت بالا تگ های <h1> و </h1> را اضافه کنید. تگ H1 به معنی heading 1 است. شش heading بطور کلی وجود دارند: H1, H2, H3, H4, H5, H6 . بطور پیش فرض، H1 بزرگترین سایز و H6 کوچکترین سایز می باشد.

نکته: اگر بخواهیم به زبان ساده تگ H1 را توصیف کنم، باید بگویم که در واقع تگ H1 ، یک سایز پیش فرض از فونت می باشد. یعنی اگر این تگ بدور یک نوشته ی ما قرار گیرد، همانگونه که در بالا گفته شد، نوشته ی ما بزرگترین سایز پیش فرض را می گیرد و اگر تگ H6 قرار بگیرد، نوشته ی ما کوچکترین سایز پیش فرض را به خود می گیرد. دلیل اینکه می گوییم سایز ییش فرض این است که می توانیم در فایل Style.css این تنظیمات را تغییر داده و اندازه را با توجه به خواسته ی خودمان تغییر دهیم. که البته در جلسات بعد با اینگونه اعمال بیشتر آشنا می شوید.

بعد از توضیحات گفته شده باید الان کد شما بصورت زیر باشد:

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>

تغییرات را save کرده و به مرورگر برگردید و آن را refresh کنید. مسلماً عنوان وبلاگ (blog’s title) شما بزرگتر شده است. جالب است نه….

● مرحله سوم:

در این مرحله قصد داریم تا  توضیحات وبلاگمان (description) را صدا بزنیم و یا فراخوانی کنیم، برای اینکار عبارت <?php bloginfo(’description’); ?> را درست در زیر عبارت عنوان وبلاگ (blog’s title) تایپ کنید، حال کد شما باید بصورت زیر باشد:

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

تغییرات را ثبت کرده و صفحه را refersh کنید، مشاهده خواهید کرد که توضیح وبلاگتان در زیر لینک عنوان وبلاگتان (blog’s title) اضافه شده است. این نکته را نیز بگوییم که شما می توانید توضیحات وبلاگتان (description) را در بخش مدیریت وردپرس تنظیم کنید.

◊ توضیح آنچه اتفاق افتاده است:

» <?php – شروع کدهای php
» bloginfo(’description’) – اطلاعات وبلاگتان را (بویژه در اینجا توضیحات وبلاگتان (description) را) صدا می زند. (به دلیل اینکه مقدار bloginfo(’’) را description قرار داده ایم، فقط توضیحات وبلاگتان (description) فراخوانی می شود).
» ; – صدا زدن توضیحات وبلاگ (description) را متوقف می کند.
» ?> – پایان کدهای php

● مرحله ی چهار:

در این مرحله برای شما  یک تگ جدید و البته بسیار مهم را به نام div را معرفی می کنیم:

بدور کدهایی که تاکنون نوشته اید تگ های <div> و </div> را تایپ کنید، در نتیجه خواهیم داشت:

<div>

<h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

</div>

تغییرات را ثبت کرده و صفحه را دوباره refresh کنید. نباید هیچ تغییری را مشاهده کنید.

شاید خیال کنید که تگ div یک تگ بلا مصرف است، اما در جلسات بعد علاوه بر اینکه بر روح سازنده ی آن درود خواهید فرستاد، کاربرد آنرا نیز بیشتر خواهید فهمید. ولی به طور اجمالی در اینجا در مورد این تگ توضیحاتی خواهیم داد: ما این تگ را قرار دادیم تا لینک عنوان وبلاگ (blog’s title) و توضیحات وبلاگ(description) را از هر چیز دیگر موجود در صفحه جدا کنیم، حال اگر شما از این تگ استفاده نکنید. هیچ محتوایی از پوسته ی شما مجزا نخواهد بود و در حقیقت همه چیز تو در تو خواهد بود. شما با قرار دادن تگ div به دور کدهای بالا در حقیقت یک باکس مخفی بدور آن ایجاد کرده اید که علاوه بر جدا کردن محتوای داخل آن از سایر عناصر موجود در صفحه، می توانید  بعد ها در فایل style.css برای باکس های مخفی (تگ div) ویژگی تعریف کنید و در حقیقت سایت تان را بسازید. کارهایی نظیر حاشیه دادن ، لایه گذاری ، لبه گذاشتن ، عکس پس زمینه ، رنگ پس زمینه و غیره.. را می توانید بروی این تگها اعمال کنید.

ممکن است این سوال برای شما پیش بیاید که با توجه به اینکه تگ باکس مخفی یا همان div را برای بسیاری از اجزای صفحه بکار می بریم، چگونه می توان بعدها در فایل Style.css یک تگ div مخصوص را مورد تغییر قرار داد. جواب شما در مرحله ی پنجم قرار دارد…

● مرحله ی پنجم:

مقدار id=”header” را به تگ div اضافه کنید مانند زیر:

<div id=”header”>

تغییرات را ثبت کرده و صفحه را refersh کنید.

البته الان ، باز هم هیچ تغییر را مشاهده نخواهید کرد. ما یک id را به تگ div اضافه کردیم. دلیل اینکه ما به این تگ div یک id اضافه کردیم این است که بتوانیم بعداً در فایل Style.css تگی با مقدار آی دی header را مورد تغییر قرار دهیم،  زیرا تگ های div زیادی وجود خواهند داشت و شما باید به گونه ای آنها را از یکدیگر متمایز کنید.

نکته: اگر از این به بعد واژه ی باکس مخفی را بکار بردیم بدانید که منظورمان همین تگ div است.

به گمانم درس امروز کوتاه بود، ولی با تگ بسیار مهمی آشنا شدید. اگر حرف من را باور نمی کنید، فایل index.php یک پوسته (نه پوسته ای که می خواهیم بسازیم) را گشوده و مشاهده کنید که این تگ چقدر زیاد بکار رفته است.

با سری آموزشی ساخت پوسته ی وردپرس در جلسات بعد همراه باشید.