مثل همیشه میریم به فولدر amoozesh
wamp رو هم باز میکنیم و با مرورگرمون به صفحه اول سایتمون میریم.
سایت ما الان یه خط در بالای صفحه داره که اسم سایت رو نوشته و با کلیک بر روی این لینک به صفحه اصلی سایت منتقل میشیم.
ما در درس قبل کد زیر رو نوشتیم:
<a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a>
خوب تا اینجارو نگه دارین!
یه سوال!
میدونین heading چیه؟
heading همون title یا عنوان است!
اگه شما میخواستین یک تگ بسازین که نشون دهنده ی heading باشه چه میکردین؟ قطعا تگی به صورت <hx> که x عدد است ، ایده ی بدی نیست!
در XHTML تگ هایی با عنوان های زیر داریم که هرچه عدد بزرگتر میشود از قدرت و اندازه نوشته ی بین دو تگ کم میشه
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
نقطه مشترک همه این تگ های اچ دار!!!! اینه که عنوان هستن!
یعنی حتی h6 که کوچکترینشون است به هر حال متمایز از نوشته های دیگر ماست و bold است!!
خوب ما برای اینکه بخواهیم اسم سایتمون بزرگتر از نوشته های معمولی دیگه باشه کدی که ریروز نوشتیم رو بین دو تگ h1 قرار میدیم یعنی داریم:
<h1><a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a></h1>
وقتی این کار رو کردیم میریم و تغییرات رو توی صفحه اصلی سایت میبینیم!
این از کار اولی!
کار بعئی ما اینه که توضیحاتی رو که موقع نصب برای وبلاگ نوشتیم ( و البته همیشه هم میتونیم در قسمت تنظیمات تغییرش بدیم!) رو بارگذاری کنیم و زیر اسم سایت توضیحات رو اضافه کنیم!
برای اینکار حتما میدونین که باید از چه تابعی استفاده کنیم؟!
از اونجایی که توضیحات سایت از جمله اطلاعات (info) مربوط به سایت هستن پس از تابع ()bloginfo استفاده میکنیم!و فقط کافیه آرگومان تابع رو “توضیحات” (description) بنویسیم:
<?php bloginfo(’description’); ?>
این کد رو بلافاصله بعد از کد قبلی نوشتیم وفایل رو سیو میکنیم ومیریم ببینیم سایتمون چه تغییری کرده!
میبینیم که توضیحاتی در زیر اسم سایت اومده که البته زیادی کوچیکه و جلوه ی لازم رو نداره!
برای حل این مشکل از تگ H2 استفاده میکنیم:
<h2><?php bloginfo(’description’); ?></h2>
و دوباره سیو میکنیم و میبینیم چه کرده ایم!
میبینیم که نوشته ی ما کمی از نام سایت که مهم تر است کوچکتر و از نوشته های معمولی بزرگتر خواهد بود!
از درسهای قبل یاد گرفتیم که php?> شروع یک کد به زبان php رو نشون میده و bloginfo تابعی است که اطلاعات سایت ما رو در بر داره!
ما در اینجا به توضیحاتی در مورد سایت نیاز داشتیم و معادل انگلیسی این کلمه (description) رو در بین دو پرانتز این تابع نوشتیم!
یک نکته دیگه رو بگم!
یادتون هست که گفتم همه ی تابع های php باید یک پرانتز باز و بسته () داشته باشند! حتی اگه چیزی بینشون نباشه!؟
برای اثبات این مساله که ممکن هست که جلوی تابع چیزی نوشته نشده باشه به این نکته توجه کنین که اگر در تابع bloginfo هیچ آرگومانی ننویسیم (یعنی بین دو پرانتز چیزی نباشه) تابع اسم وبلاگ رو بر به ما میده یعنی نوشتن name یا ننوشتن اون هیچ فرقی نداره و تنها سودی که نوشتنش داره اینه که از گیجینگ (گیج شدن) جلوگیری میکنه!
این هم از این!
حالا میریم سراغ تگی که بسیار باهاش کار خواهیم داشت و اساسی هم کار خواهیم داشت!
تگ <div> کار مهمی به عهده داره و اون اینه که یک جعبه ی نا مرئی برای ما میسازه! یعنی یک حدودی رو معین میکنه که کدهای مربوط رو در خودش جا میده
حالا تمام کدهایی که نوشتیم یعنی همین دو خط ناقابل رو بین این تگ قرار بدین لطفا پلیض!
تا داشته باشیم:
<div>
<h1><a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a></h1>
<h2><?PHP bloginfo(’description’);?></h2>
</div>
اگه ذخیره کنید و برین سایت رو ببینید میبینید که هیچ تغییری نمیبینید! چون گفتم که این تگ نامرئی است و چشم بصیرت میخواهد دیدنش!
خوب شاید بپرسین که فایده ی این کار چی بود؟!
من هم جواب میدم فایده ی این کار این است که ما میتونیم به این تگ یک اسم بدیم!
بعد ها کلی با این اسم دادن ها کار خواهیم داشت و میفهمیم که بدون این اسم هیچ کاری نمیشه کرد!
ما به کل کدهایی که نوشتیم اسم header رو میدیم ، چرا؟ چونکه همه چیزهایی که نوشتیم مربوط به سر تیتر و عنوان صفحه ما بود!
نحوه ی نامگذاری این بچه div به این صورت است که میبینید:
<div id=”header”>
اکی؟ یعنی قبل از اینکه < بنویسیم یک id یا شناسه به تگ میدیم تا بدونیم که هرچی بین این تگ تا <div/> است مربوط به header سایت است!
البته با ذخیره کردن و refresh کردن سایت میبینیم که هیچ تغییری نداریم در حالی که خودمون میدونیم داریم!!:d
حالا ما تا امروز رسیدیم به اینجا که میبینید:
<div id=”header”>
<h1><a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a></h1>
<h2><?PHP bloginfo(’description’);?></h2>
</div>
وردپرس
