از امروز شروع میکنیم به طراحی قالب برای وردپرس بسیار آروم و نم نم میریم جلو تا همه با هر سطحی از آشنایی که از کد نویسی دارن بتونن دقیقا بفهمن چیکار میکنن نه اینکه یه چیزی رو یاد بگیریم و یک هفته بعد یادمون بره. امروز یک سری توضیحات میدم که امیدوارم دقیقا انجام بدین تا به نتیجه ی مطلوب برسیم یک اینکه لطفا هر موقع گفتم این کد رو بنویسین دقیقا منظورم اینه که کد رو بنویسین! یعنی کپی پیست نداریم! البته بعضی وقت ها مهم نیست که خواهم گفت. نکته ی دیگه در مورد کد نویسیه که حتما باید بهش توجه کنین! هر تگی که باز میشه بالاخره باید بسته شه! اما دقیقا به صورت زیر <tag1> <tag2> <tag2/> <tag1/> </blockquote> به شکل زیر نگاه کنید که کاملا و دقیقا غلط میباشد!!! <tag1> <tag2> <tag1/> <tag2/> </blockquote> این نظریه یا اطلاعیه نیست یک قانون است. یعنی ما تگ هایی رو که باز میکنیم به ترتیب میبندیم! اگر دقت کرده باشین (اگه نکردین دقت کنین!!!) احتمالا فهمیدین که شروع کننده ی هر تگ به صورت <> است، و برای بستن هر تگ باید یک اسلش قبل از تگ مربوطه بزاریم یعنی اینجوری! : </> نگران نباشین بعدا میفهمیم که کاربرد هر تگ چیه و چه میکنه! نکته ی دیگه در مورد ساختار قالب های وردپرسه که برای کسی که نمیشناستش بسیار سخت و عجیبه اما وقتی بفهمیم که جریان چیه به هوش طراحان پی میبریم و کم کم میفهمیم که چقدر خوب و دقیق و مناسبه! در زیر لیست فایلهای که یک قالب کامل رو تشکیل میدن رو میبینیم index.php home.php single.php page.php archive.php category.php search.php 404.php comments.php comments-popup.php author.php date.php style.css </blockquote> نگران نباشین اونقدر که به نظر میرسه سخت نیست! فایل index.php قسمت اصلی قالب ماست که وجودش ضروری و لازمه! همینطور style.css که از اسمش معلومه نقش استایل کردن و شکل دادن به تم یا همون قالب مارو داره! شما وقتی در یک سایت بر پایه ی وردپرس هستین در یکی از صفحات زیر هستین <blockquote style="text-align: left;"> index.php single.php page.php archive.php search.php 404.php </blockquote> از اسم هر کدومم معلومه که جریان چیه! اگر هنوز نفهمیدین دلیل بر خنگی شما نیست! مطمئن باشین تعارف نمیکنم! index صفحه اصلی سایت ، single صفحه ی یک نوشته به خصوص ، page یک صفحه از سایت ، archive صفحه آرشیو هفته ای ، ماهانه و … سایت ، search صفحه ای که برای جستجوی سایت استفاده میشه و بالاخره ۴۰۴ صفحه ای برای ارور (error) سایت! البته هیچ کدوم از اینها لازم نیستن یعنی ساخت index در اولویته !! با ساخت همین یک صفحه (یعنی index) وردپرس اکثر کارهارو انجام میده! iran_forum.ir
پاسخ : آموزش طراحی قالب وردپرس #۱ آموزش طراحی قالب وردپرس #۲ خوب میریم سراغ اصل مطلب تصویر زیر رو نگاه کنید دیدین؟ حالا دقت کنین! میبینیم که یک قالب تشکیل شده از چند قسمت مختلفه که در کنار هم قرار میگیرن ! البته اکثرن این شکلیه و میتونه به هر صورتی باشه! که فعلا به ما ربطی نداره! تو قسمت header اسم وبلاگ و توضیحات میتونه قرار بگیره و تو index هم نوشته ها و پست های وبلاگ قرار میگیره یعنی همین جایی که شما میخونین داخل در index می با شد! در sidebar هم که هر چیزی از جمله widget (ابزارک) های مختلف قرار میگیرن! در footer هم اطلاعاتی مثل copyright ، نام طراح و … البته اینها قانون نیستن شما میتونینهر کاری بخواهید انجام بدین مثلا جای index رو با footer عوض کنین! البته اگه تاب برداشته باشه یه جاییتون! بلانسبت! نکته ی بسیار خوب وردپرس که در پست قبل ازش گفتم اینجا روشن میشه که : header و footer معمولا در صفحات مختلف از جمله page.php ، single.php و … تغییر نمیکنند! و این index است که مثلا single.php جایگزینش میشه.
پاسخ : آموزش طراحی قالب وردپرس #۱ آموزش طراحی قالب وردپرس #۴(هدر۱) خوب لطفا wamp رو باز کنید و به صفحه ی تم amoozesh که دیروز ساختیم برید <blockquote style="text-align: right;"> کد PHP: C:wampwwwwordpresswp-contentthemesamoozesh </blockquote> امیدوارم تغییری در فایل index.php ایجاد نکرده باشین! اگه اینکار رو انجام دادین به نوشته شماره۳ رفته و کد رو با من یکی کنید. توسط مرورگر وبی که استفاده میکنین (که امیدوارم اینترنت اکسپلورر نباشه!!!!) برین به صفحه اصلی سایت <blockquote style="text-align: right;"> کد PHP: http://localhost/wordpress/ </blockquote> پس الان ۳ تا صفحه باز داریم فولدر تم آموزش مرورگر وب در صفحه اصلی و یک برنامه که یه آهنگ ملایم پخش میکنه! همینطور که میبینید در صفحه سایتمون هیچی نیست! خوب، میریم وارد index.php میشیم (با notepad) و بعد از تگ <body> نوشته ی زیر رو تایپ میکنیم!! کپی نمیکنیم!!!!:-w <blockquote style="text-align: right;"> کد PHP: <?php bloginfo(’name’); ?> </blockquote> میدونیم که این یک کد نوشته شده به زبان php است و bloginfo یک تابع است که توسط سازندگان وردپرس ساخته شده و ما فقط اون رو فراخوانی میکنیم. هر تابع php در مقابل خودش () دارد که میتونه بینش آرگمان های مختلفی باشه یا اصلا نباشه! bloginfo الان نام (name) سایت رو برمی گردونه(یعنی اسم سایت ما رو به html تبدیل میکنه که نمایش داده بشه) خوب؟ دیگه بیشتر از این نمیشه توضیح داد! حالا کلید Ctrl رورو نگه دارین و S رو بزنین تا کارمون ذخیره(save) بشه! حالا میریم به مرورگرمون که در صفحه ی اول سایتمون قرار داره و کلید F5 رو میزنیم تا صفحه refresh یا به قولی reload بشه. دیدین؟!! ما در واقع الان با تابع bloginfo نامی که در صفحه ی همگانی (general) تنظیمات (options) میتونیم عوض کنیم رو فراخوانی کردیم. <blockquote style="text-align: right;"> کد PHP: http://localhost/wordpress/wp-admin/options-general.php </blockquote> خوب حالا اگه بخواهیم که این نوشته رو به یک لینک تبدیل کنیم که کاربر با کلیک کردن روی نوشته به صفحه ی اصلی سایت بره چی؟ کاری نداره! با استفاده از یک تگ XHTML این کار به راحتی انجام میشه! بلافاصله قبل از شروع کدی که نوشتیم یعنی php?> کد زیر رو اضافه میکنیم: <blockquote style="text-align: right;"> کد PHP: <a href=”#”> </blockquote> و بعد از <? هم این تگ رو که باز کردیم (یعنی تگ a رو) همونطوری که قبلا گفته بودم میبندیم یعنی یک / بهش اضافه میکنیم. <blockquote style="text-align: right;"> کد PHP: </a> </blockquote> تا در مجموع داشته باشیم: <blockquote style="text-align: right;"> کد PHP: <a href=”#”><?php bloginfo(’name’); ?></a> </blockquote> یادتون نره کپی نکنید چون اصلا کار نخواهد کرد! من هم دیگر تکرار نخواهم کرد این نکته رو! میبینید که الان نوشته ی ما تبدیل به یک لینک شده که البته با کلیک بر روی اون کار خاصی انجام نمیشه! حالا اگه بخواهیم کار خاصی انجام بشه چی؟ این هم کاری نداره برای اینکه لینک مارو به صفحه اصلی سایت ارجاع بده باید کد زیر رو جایگذین # بکنید. <blockquote style="text-align: right;"> کد PHP: <?php bloginfo(”url”); ?> </blockquote> احتمالا فهمیدین چی شد! آرگومان تابع bloginfo رو اینبار url انتخاب کردیم که آدرس سایت رو برمی گرداند!! به همین راحتی
پاسخ : آموزش طراحی قالب وردپرس #۱ مثل همیشه میریم به فولدر amoozesh wamp رو هم باز میکنیم و با مرورگرمون به صفحه اول سایتمون میریم. سایت ما الان یه خط در بالای صفحه داره که اسم سایت رو نوشته و با کلیک بر روی این لینک به صفحه اصلی سایت منتقل میشیم. ما در درس قبل کد زیر رو نوشتیم: کد PHP: <a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a> </blockquote> خوب تا اینجارو نگه دارین! یه سوال! میدونین heading چیه؟ heading همون title یا عنوان است! اگه شما میخواستین یک تگ بسازین که نشون دهنده ی heading باشه چه میکردین؟ قطعا تگی به صورت <hx> که x عدد است ، ایده ی بدی نیست! در XHTML تگ هایی با عنوان های زیر داریم که هرچه عدد بزرگتر میشود از قدرت و اندازه نوشته ی بین دو تگ کم میشه کد PHP: <h1 dir="ltr" style="text-align: left;"><h1> </h1></h1> <h2 dir="ltr" style="text-align: left;"><h2> </h2></h2> <h3 dir="ltr" style="text-align: left;"><h3> </h3></h3> <h4 dir="ltr" style="text-align: left;"><h4> </h4></h4> <h5 dir="ltr" style="text-align: left;"><h5> </h5></h5> <h6 dir="ltr" style="text-align: left;"><h6> </h6></h6> </blockquote> نقطه مشترک همه این تگ های اچ دار!!!! اینه که عنوان هستن! یعنی حتی h6 که کوچکترینشون است به هر حال متمایز از نوشته های دیگر ماست و bold است!! خوب ما برای اینکه بخواهیم اسم سایتمون بزرگتر از نوشته های معمولی دیگه باشه کدی که ریروز نوشتیم رو بین دو تگ h1 قرار میدیم یعنی داریم: <h1><a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a></h1> </blockquote> وقتی این کار رو کردیم میریم و تغییرات رو توی صفحه اصلی سایت میبینیم! این از کار اولی! کار بعئی ما اینه که توضیحاتی رو که موقع نصب برای وبلاگ نوشتیم ( و البته همیشه هم میتونیم در قسمت تنظیمات تغییرش بدیم!) رو بارگذاری کنیم و زیر اسم سایت توضیحات رو اضافه کنیم! برای اینکار حتما میدونین که باید از چه تابعی استفاده کنیم؟! از اونجایی که توضیحات سایت از جمله اطلاعات (info) مربوط به سایت هستن پس از تابع ()bloginfo استفاده میکنیم!و فقط کافیه آرگومان تابع رو “توضیحات” (description) بنویسیم: <?php bloginfo(’description’); ?> </blockquote> این کد رو بلافاصله بعد از کد قبلی نوشتیم وفایل رو سیو میکنیم ومیریم ببینیم سایتمون چه تغییری کرده! میبینیم که توضیحاتی در زیر اسم سایت اومده که البته زیادی کوچیکه و جلوه ی لازم رو نداره! برای حل این مشکل از تگ H2 استفاده میکنیم: کد PHP: <h2><?php bloginfo(’description’); ?></h2> </blockquote> و دوباره سیو میکنیم و میبینیم چه کرده ایم! میبینیم که نوشته ی ما کمی از نام سایت که مهم تر است کوچکتر و از نوشته های معمولی بزرگتر خواهد بود! از درسهای قبل یاد گرفتیم که php?> شروع یک کد به زبان php رو نشون میده و bloginfo تابعی است که اطلاعات سایت ما رو در بر داره! ما در اینجا به توضیحاتی در مورد سایت نیاز داشتیم و معادل انگلیسی این کلمه (description) رو در بین دو پرانتز این تابع نوشتیم! یک نکته دیگه رو بگم! یادتون هست که گفتم همه ی تابع های php باید یک پرانتز باز و بسته () داشته باشند! حتی اگه چیزی بینشون نباشه!؟ برای اثبات این مساله که ممکن هست که جلوی تابع چیزی نوشته نشده باشه به این نکته توجه کنین که اگر در تابع bloginfo هیچ آرگومانی ننویسیم (یعنی بین دو پرانتز چیزی نباشه) تابع اسم وبلاگ رو بر به ما میده یعنی نوشتن name یا ننوشتن اون هیچ فرقی نداره و تنها سودی که نوشتنش داره اینه که از گیجینگ (گیج شدن) جلوگیری میکنه! این هم از این! حالا میریم سراغ تگی که بسیار باهاش کار خواهیم داشت و اساسی هم کار خواهیم داشت! تگ <div> کار مهمی به عهده داره و اون اینه که یک جعبه ی نا مرئی برای ما میسازه! یعنی یک حدودی رو معین میکنه که کدهای مربوط رو در خودش جا میده حالا تمام کدهایی که نوشتیم یعنی همین دو خط ناقابل رو بین این تگ قرار بدین لطفا پلیض! تا داشته باشیم: کد PHP: <div><br> <h1><a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a></h1><br> <h2><?PHP bloginfo(’description’);?></h2><br> </div> </blockquote> اگه ذخیره کنید و برین سایت رو ببینید میبینید که هیچ تغییری نمیبینید! چون گفتم که این تگ نامرئی است و چشم بصیرت میخواهد دیدنش! خوب شاید بپرسین که فایده ی این کار چی بود؟! من هم جواب میدم فایده ی این کار این است که ما میتونیم به این تگ یک اسم بدیم! بعد ها کلی با این اسم دادن ها کار خواهیم داشت و میفهمیم که بدون این اسم هیچ کاری نمیشه کرد! ما به کل کدهایی که نوشتیم اسم header رو میدیم ، چرا؟ چونکه همه چیزهایی که نوشتیم مربوط به سر تیتر و عنوان صفحه ما بود! نحوه ی نامگذاری این بچه div به این صورت است که میبینید: کد PHP: <div id=”header”> </blockquote> اکی؟ یعنی قبل از اینکه < بنویسیم یک id یا شناسه به تگ میدیم تا بدونیم که هرچی بین این تگ تا <div/> است مربوط به header سایت است! البته با ذخیره کردن و refresh کردن سایت میبینیم که هیچ تغییری نداریم در حالی که خودمون میدونیم داریم!! حالا ما تا امروز رسیدیم به اینجا که میبینید: کد PHP: <div id=”header”><br> <h1><a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a></h1><br> <h2><?PHP bloginfo(’description’);?></h2><br> </div> </blockquote>
پاسخ : آموزش طراحی قالب وردپرس #۱ آموزش طراحی قالب وردپرس #۵(حلقه) در درس قبلی ساخت هدر رو تموم کردیم و حالا میخواهیم بریم پایین! یک تگ نامرئی(div) زیر هدر میسازیم و id اون رو content می نهیم!!! که معنای محتوا رو میده! در مجموع جلسه قبل و امروز داریم: کد: <blockquote dir="ltr"> کد: کد: <p style="text-align: left;"><body><br> <div id=”header”><br> <h1><a href=”<?PHP bloginfo(’url’);?>”><?PHP bloginfo(’name’);?></a></h1><br> <h2><?PHP bloginfo(’description’);?></h2><br> </div></p> <p style="text-align: left;"><div id=”content”></p> <p style="text-align: left;"></div><br> </body></p> </blockquote> همه چیز فکر میکنم واضح بوده و هست فقط یه نکته در مورد کد نویسی و اون اینکه این فاصله هایی که من میدم و شما هم انشاالله میدهید برای چک کردن و دوباره خواندن کد در آینده به ما کمک زیادی میکنه تا گیج نشیم! توجه داشته باشین که به جای استفاده از کلید space برای فاصبه های زیاد مثل خط دوم و سوم این کد از کلید tab استفاده کنید! خوب حالا در content کد زیر را بنویسید. کد: کد: <p dir="ltr" style="text-align: left;"><?PHP if (have_posts() ) : while (have_posts() ) : the_post(); ?></p> <p dir="ltr" style="text-align: left;"><?PHP endwhile; ?></p> <p dir="ltr" style="text-align: left;"><?PHP endif ?></p> </blockquote> میدونین حلقه چیه؟حلقه یعنی اینکه تا زمانی که به چیزی که مد نظر ماست برسیم یک کد تکرار میشه! الان ما در اینجا حلقه ساختیم! ولی قبل از اون یک شرط گذاشتیم که با if ساخته میشه: یعنی نوشتیم اگر ( if ) ما پستی (مطلبی) داشتیم برو به مرحله ی بعد اگر نداشتیم برو تا بعد از شرط یعنی بعد از endif !! حالا در مرحله ی بعد while یک حلقه ایجاد میکنه که تا زمانی که پست داریم یعنی have_posts برقرار است این حلقه تا endwhile میره سر راه the_post رو فراخوانی میکنه و باز برمیگرده! یادتون هست که گفته بودم هر چیزیو که باز میکنیم به ترتیب میبندیم؟ دلیل اینکه while قبل از if بسته شد هم از اون قانون نشأت میگیره! خوب میریم و قبل از endwhile تابع the_title رو فراخوانی میکنیم تا مثل درس قبلی که عنوان وبلاگ رو فراخوانی کردیم اینبار عنوان پست یا پست هامون رو فراخوانی کنیم تا داشته باشیم: کد: کد: <p dir="ltr" style="text-align: left;"><?PHP if(have_posts()): while(have_posts()):the_post();?></p> <p dir="ltr" style="text-align: left;"><?PHP the_title() ?></p> <p dir="ltr" style="text-align: left;"><?PHP endwhile; ?></p> <p dir="ltr" style="text-align: left;"><?PHP endif ?></p> </blockquote> کار خودمون رو ذخیره میکنیم و میریم در داشبورد یا همون پیشخوان خودمون تا چند پست امتحانی بدیم! حتما میدونین که محل پست کردن مطالب جدید در این آدرس است: کد: کد: http://localhost/wordpress/wp-admin/post-new.php </blockquote> بعد از اینکه دو،سه تا پست دادیم میریم ببینیم سایتمون در چه وضعیتی است! در این عکس صفحه ی ما تا اینجای کار رو میبینید به همراه تابع هایی که در کنار هر کدوم از اثرات خودشون با رنگ قرمز مشخص شده اند! و میبینیم که عنوان پست های ما پشت سر هم و بیریخت و… در کنار هم توسط the_title فراخوانی شده اند! خوب اگه ولگرد وب (وب گرد) باشید مثل من! حتما در وبلاگ های مختلف دیدین که با کلیک روی هر عنوان مطلب میتونین به صفحه ی اصلی اون پست برین و در واقع هر عنوان یک لینک به همون مطلبه! حالا ما همونطور که عنوان سایت رو تبدیل به لینک کردیم این کارو با عنوان مطلب هم میکنیم: کد: کد: <a href=”#”> <?PHP the_title() ?> </a> </blockquote> با این کار عنوان هامون تبدیل به لینک هایی شدن که همه سر به یک بیابان میگذارند! و آن بیابان # است! میتونین با ذخیره کردن صفحه و دیدن صفحه سایت این نکته رو تست کنین. میبینیم که همه ی عنوان ها تبدیل به لینک های به درد نخوری تبدیل شدن که هیچ غ.. نمیکنن! اما برای اینکه یه غ… بکنن و لینکشون تبدیل به آدرس اون پست بشه از تابع the_permalink استفاده ، و اون رو جایگزین # میکنیم. این تابع چون تابع php است میدونیم که چه کنیم: کد: کد: <a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a> </blockquote> حله؟حالا لطفا پاشین یک عدد سیب میل بفرمایین تا چشماتون هم یه استراحتی بکنه و یه ویتامینی چیزی هم برسه به بدن مبارک! البته من سیب ندارم پرتقال میخورم! اینم قبوله! نوش جان! حالالینکهامون درست شدن! میدونین که تا اینجا چی شد؟! حلقه while به تعداد پست هایی که داریم میره و خط زیرش رو تکرار میکنه و یک کار رو با همه ی اونها انجام میده! یعنی عنوان پست رو تبدیل به لینک همون پست میکنه و میره سراغ پست بعدی! حالا با این شکل ناجور چه کنیم؟! یادتون هست که گفته بودم header چیست و تگ مربوط به اون در xhtml چیه؟ این عنوان ها هم header هستند دیگر!؟ خوب خط کدی که نوشتیم رو بین تگ h میگذاریم تا ابهت یک عنوان رو داشته باشه! اما این بزرگی به عظمت نام و عنوان سایت ما نیست!! پس به جای h1 از h2 که کمی کوچکتر است استفاده میکنیم! سپس save و refresh!! دیدین چی شد؟ کد: کد: <h2> <a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a> </h2> </blockquote>
پاسخ : آموزش طراحی قالب وردپرس #۱ آموزش طراحی قالب وردپرس #۵ب(متن مطالب) مثل همیشه برنامه ها و فولدر های مورد نیازمون رو باز میکنیم. در درس قبل به اینجا رسیدیم که وبلاگمون دارای اسم، توضیحات و لیست مطالب هست. خوب میدونیم که مطالب ما الان دیده نمیشن! خوب برای اینکار باید در زیرعنوان نوشته در فایل index که در جلسه قبل با این کد: کد: <h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2> </blockquote> نوشتیم کد زیر رو اضافه کنیم: کد: <?PHP the_content();?> </blockquote> به همین راحتی content یا محتوای پست رو فراخوانی میکنیم، کار رو ذخیره کرده و میریم سایتمون رو ببینیم! به این ترتیب متن نوشته ها هم در صفحه ظاهر میشه و صفحه ما شامل: عنوان سایت،توضیحات سایت،عنوان پست ها به همراه متن اونهاست! ما در حال حاظر یک سایت نیمه کامل و البته بسیار بد شکل و قیافه داریم که اصلا ترس نداره! بعدا با استایل کردن میتونیم بسیار زیبا و شکیلش کنیم.(با کمک فایل style.css ) میبینیم که یک خط کوتاه کد php که نوشتیم چه میکنههههه!!! احتمالا میدونین که اگه خودتون میخواستین با html این مطالبی که نوشتین رو بعد از وقت گذاشتن بسیار زیاد بنویسین احتمالا از نوشتن پشیمون میشدین! خوب بریم سر تمیز کاری! یادتون میاد که در درس header کل کدهای مربوط به قسمت بالایی صفحه رو بین تگی نامرئی(div) با شناسه ی header گذاشتیم و در پایین اون یک تگ نامرئی دیگه ساختیم با نام content که کل محتوای صفحه رو در بر میگیره! حالا ما درمحدوده ی content قرار داریم و میخواهیم که محتوای عنوان نوشته ها و محتوای اونها رو از بقیه قسمت های صفحه متمایز کنیم و نامهایی مناسب براشون انتخاب کنیم. برای اینکار پیشنهاد من این است که یک نام مناسب برای عنوان هر پست و همچنین یک نام برای متن پستها انتخاب کنیم! برای اینکار ابتدا یک تگ div برای عنوان پست به این صورت: کد: <blockquote dir="ltr"> <div class=”posttitle”> <h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2> </blockquote> <blockquote dir="ltr"> </div> </blockquote> و یک تگ هم برای محتوا به این صورت: کد: <blockquote dir="ltr"> <div class=”entry”> <?PHP the_content();?> </div> </blockquote> میسازیم، میدونیم که این دو تگ(یعنی posttitle و entry ) با هم تشکیل گروه بزرگتری رو میدن که همان پستهای ماست پس هر دوی تگ ها رو با نام post به هم مربوط میکنیم: کد: <blockquote dir="ltr"> <div class=”post”> <?PHP if(have_posts()): while(have_posts()):the_post();?> <div class=”posttitle”> <h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2> </div> <div class=”entry”> <?PHP the_content();?> </div> </div></blockquote> احتمالا این سوال پیش اومده که چرا به جای id یه تگ ها class دادم!!؟ اصلا فرقشون چیه؟ جواب اینه که فرق زیادی ندارن فقط موضوع مورد توجه اینه که class در صفحه n بار تکرار میشه اما id یگانه است! در واقع مثل اسم عام و اسم خاص میمونه! ما فقط یک برج ایفل داریم اما n تا برج داریم!! اوکی شد؟! اوکی… دیگه چیز خاصی برای این درس نمیمونه جز اینکه بگم حتمن حتمن حتمن گوگل کروم رو دانلود کنید! کاری ندارم که مرورگر خوبی هست یا نه اما برای درک اینکه ما داریم چیکار میکنیم بسیار زیاد کمکمون میکنه! هرچند یک افزونه برای فایرفاکسی ها هم بود(اسمش رو یادم نیست اما یک bug داشت و عکسش هم یه سوسک بود ) که کاری که من میخوام توضیح بدم رو انجام میداد اما من کروم رو برای اینکار پیشنهاد میکنم!
پاسخ : آموزش طراحی قالب وردپرس #۱ آموزش طراحی قالب وردپرس #۵ت اگه یک نگاه کلی به کل کارهایی که انجام دادیم بندازیم میفهمیم که یک if داریم به معنی: “اگر برقرار باشد” منظورم خط زیر است: کد: <?PHP if(have_posts()): while(have_posts()):the_post();?> </blockquote> که اگر پست داشته باشیم کد زیرش رو میخونه اما اگر نداشته باشیم چی!؟ یعنی مثلا ما هیچ پستی ننوشتیم یا در اون زمینه ای که بازدید کننده دنبالش میگرده ننوشتیم! خوب برای فهماندن جمله ی: “اگر شرط برقرار نبود” به php کد زیر رو بلافاصله بعد از endwhile مینویسیم: کد: <blockquote dir="ltr"> <?php else : ?> <div class=”post”> <h2><?php _e(’Not Found’); ?></h2> </div> </blockquote> باید فهمیده باشین چی شد ما در واقع یک صفحه ی خطا ساختیم که اگر پست مورد نظر پیدا نشد نوشته ی Not Found به معنای “پیدا نشد” نمایش داده میشه و همونطور که قبلا هم گفتم میتونیم هرچیزی جایگزین این جمله بکنیم! مثلا من میرم به آدرس زیر و با پیغام خطا مواجه میشم: http://localhost/wordpress/?cat=789 </blockquote> چون من در دسته بندی هام مثلا ۱۰ تا موضوع دارم نه ۷۸۹ تا! و چون جایی رفتم که وجود نداره با این پیغام که “پیدا نشد” مواجه میشم! این رو هم اضافه کنم که اگه این کد رو نمینوشتیم اتفاقی نمی افتاد فقط Not Found نمایش داده نمیشد! همین! پس فهمیدیم که while با endwhile بسته شد و if با else که عکس اون عمل میکنه ادامه یافت!: توضیح:قرمز ها تابع، و همرنگ ها مربوط به همند. حالا در مورد پست ها! وقتی نگاهی به source سایتمون بکنیم میفهمیم که تمام پستها با یک کلاس (post) شناخته شده اند! اما هر پست برای خودش پستیه!! و یک آی دی یا شناسه میخواد که اون رو از بقیه پست ها متمایز کنه! برای اینکه به پست هامون یک آی دی مناسب بدیم به صورت زیردر کنار کلاس post : کد: id=”post-<?php the_ID(); ?>” </blockquote> یک خط کد مینویسیم، تابع the_ID تابعی است که کارش اینه که به هر مطلب یک شماره ی منحصر به خودش رو میده حالا بعد از ذخیره کار میریم و با گوگل کروم که گفتم دانلود کنید و یا با فایرفاکس و افزونه مورد نظر ما (که اسمش رو یادم نبود و الان هست!) یعنی افزونه ی Firebug سایت رو باز میکنیم: در کروم با کلیک راست روی قسمتی از صفحه (مثلا هدر) و کلیک بر روی آخرین گزینه (Inspect element) صفحه ای باز میشه که سورس رو بسیار واضح و عالی مرتب کرده و بر روی هر قسمت کد که بریم اون قسمت با رنگ زرد در صفحه مشخص میشه و ما می فهمیم هر کد مربوط به کدام قسمت است!
پاسخ : آموزش طراحی قالب وردپرس #۱ آموزش طراحی قالب وردپرس #۵ث(هدایتگر صفحه) تمام مواد لازم رو باز میکنیم و میریم به index.php و شروع میکنیم به کار تا امروز پرونده ی درس ۵ رو ببندیم تا به ن و ه ی نرسیده!!! گفتیم که میخواهیم یک “قبلی” و یک “بعدی” که به صفحات قبلی و بعدی میرن لینک بدیم! این گزینه ها زمانی به کار ما میان که ما پستی نوشته باشیم و حتی بیشتر از اون حدی که نوشتیم هم نوشته باشیم! بنابراین کدی که میخواهیم بنویسیم زمانی است که شرط if برقرار باشه! یعنی قبل از else که خلاف اونه و بعد از endwhile کدمون رو مینویسیم. کد: <blockquote style="text-align: right;" dir="ltr"> <div class=”navigation”> <?PHP posts_nav_link(); ?> </div> </blockquote> برای این هدایت کننده (navigator) هم یک div تگ ساختیم که بعدا بتونیم کارایی که میخواهیم رو انجام بدیم و در ضمن جداش کرده باشیم از بقیه قسمت ها… این نکته هم میدونیم که میتونیم حد اکثر تعداد پست های هر صفحه رو از Options > Reading : کد: <blockquote style="text-align: right;"> http://localhost/wordpress/wp-admin/options-reading.php </blockquote> عوض کنیم و کمترش کنیم تا بتونیم نتیجه کاری که کردیم رو ببینیم.من این مقدار رو ۲ کردم! ذخیره کنیم و ببینیم چه کرده ایم! میبینید که در زیر صفحه یک جمله ی Next Page اومده که با کلیک کردن روش میریم به صفحه بعدی… علامت « هم که میبینید یکی از اون کدهای مخفی html است که در درس قبلی گفتیم و پیش فرض تابع posts_nav_link است. البته این تابع هم انعطاف پذیری داره و میتونیم با ۳ آرگومان تغییرش بدیم: کد: <blockquote style="text-align: right;"> <?php posts_nav_link(’in between’,’before’,’after’); ?> </blockquote> اگه تعداد صفحات ما حداقل ۳ صفحه باشه و ما بریم به صفحه ای به غیر از اولی و آخری هم یک “صفحه قبی” داریم و هم یک “صفحه بعدی” که بین این دو اولین آرگومان این تابع است! مثلا من میخوام بین این دو نوشته ### باشه!! آرگومان بعدی برای جایگزین کردن نوشته ی Previous Page» است و دومی برای جایگزینی «Next Page : کد: <blockquote style="text-align: right;"> <?php posts_nav_link(’###’,’ghabli’,’badi’); ?> </blockquote> حله؟! البته من اینکار رو برای واضحتر کردن این قضیه کردم و نیازی نیست انقدر بیریختش کنید امروز قسمت Content هم تموم شد یعنی ما تا امروز Header و Content سایت رو ساختیم و باز هم یعنی که نصف راهو رفتیم! میمونه Sidebar یا کناره ی سایت و Footer که پایین سایتمون رو در بر میگیره! یک نگاه کلی به توابع مهمی که تا حالا یاد گرفتیم و به کار بردیم در این عکس بندازیم:
پاسخ : آموزش طراحی قالب وردپرس #۱ آموزش طراحی قالب وردپرس #۶الف(سایدبار) امروز میریم سراغ یکی دیگر از قسمتهای مهم هر سایت، یعنی سایدبار یا ستون کناری که میتونیم بسیاری از کاربردها و ابزارک ها رو در این قسمت قزار بدیم. میدونیم که وردپرس قسمتی داره به نام ابزارک ها یا widgets که ابزارهایی رو برای قالب ما در خودش جا داده و ما میتونیم این ابزار ها رو از سایت وردپرس یعنی wordpress.org پیدا و دانلود کنیم. برای اینکه قالب ما بتونه از ابزارک ها استفاده کنه یا اصطلاحن widgetize بشه باید یه کارهایی انجام بدیم که قعلن کاری نداریم به اون قضیه ! فقط خواستم بدونین این کلمات قلمبه سلنبه(املاشو بلد نیستم) چیز خاصی نیستن و یک خط کد کارشه! حالا میریم وارد بحث سایدبار بشیم و چند تا امکان پیش فرض براش قرار بدیم. میدونیم که header و content و sidebar و footer از هم جدا هستن! یعنی div هاشون توهم نمیرن! همونطوری که بعد از بسته شدن تگ header رفتیم سراغ content حالا بعد از آخرین <div/> که مربوط به content هست یک div با کلاس sidebar میسازیم: کد PHP: کد: <p dir="ltr" style="text-align: left;"><div class=”sidebar” ></p> <p dir="ltr" style="text-align: left;"></div></p> </blockquote> شاید این سوال پیش بیاد که ما چرا برای header و content از آی دی که منحصر به فرد هست استفاده کردیم! ولی برای سایدبار از کلاس؟ و جواب اینه که ممکنه ما بخواهیم ۲ سایدبار داشته باشیم! و برای اینکه بتونیم با هر دوشون یک کار رو انجام بدیم دادن کلاس میتونه مفید باشه! البته الان ما هدفمون اینه که کارهای پایه رو یادبگیریم، یعنی حداقل دانشی که برای طراحی قالب هست! بعد از اتمام این سری درس میریم سراغ طراحی یک قالب کامل با تمام ابزار ها و امکانات که در اونجا تکنیک های مفیدی یاد خواهیم گرفت. بریم سراغ درس، یک تگ ul که مخفف unordered list است رو در محدوده ی sidebar باز میکنیم و میبندیم تا داشته باشیم: کد: <blockquote style="text-align: left;" dir="ltr"> کد PHP: کد: <blockquote style="text-align: left;" dir="ltr"><p><div class=”sidebar”><br> <ul></p> <p></ul><br> </div></p></blockquote> </blockquote> تگ ul در واقع برای لیست کردن نوشته های ماست، مثلا نوشته زیر در این تگ قرار گرفته: این یک نمونه از تگ ul است. این یک نمونه دیگراین تگ است!! میبینیم که یک نقطه تو پر هم در کنار هر جمله میاره. حالا بین این تگ رو با یک تگ li یا لیست پر میکنیم و با تابعی که قبلا یاد گرفتیم یعنی e_ نوشته Categories رو فراخوانی میکنیم: کد PHP: کد: <li><br> <?php _e(’Categories’) ?><br> </li> </blockquote> احتمالا فهمیدین که این کارها برای نوشتن عنوان قسمتی از سایدباره که دسته بندی موظوعات سایت رو در خودش جا میده! یادتون هاست که برای عناوین از چه تگی استفاده کردیم؟! از تگ h2 استفاده میکنیم و کد رو به شکل زیر تغییر میدیم: کد PHP: کد: <li><br> <h2> <?php _e(’Categories’) ?> </h2><br> </li> </blockquote> میتونیم تا اینجای کار رو ذخیره کنیم و به سایتمون سر بزنیم و ببینیم که یک [h=2]Categories[/h] در وردپرس انگلیسی و یا یک [h=2]دسته ها[/h] در وردپرس فارسی اضافه شده به انتهای صفحه مون. حالا باید کدی بنویسیم که دسته بندی های ساین رو فرا خوانی کنه و لیستش رو زیر نوشته ی ” دسته ها ” قرار بده برای اینکار در داخل تگ li که نوشتیم و بعد از پایان تگ h2 کد زیر رو مینویسیم: کد PHP: کد: </p><blockquote> <p style="text-align: left;" dir="ltr"><ul> <?php wp_list_cats(); ?> </ul></p> </blockquote><p style="text-align: left;" dir="ltr"> </blockquote> این تابع آرگومان های بسیاری داره که بعدن مفصل حرف میزنیم راجع به این موضوع، فقط تا این حد بدونین که: مثلن number=n تعداد n عدد موضوع رو نشون میده! یا hide_empty=n دسته هایی که هیچ نوشته ای ندارن رو نشون میده اگه n صفر باشه و نشون نمیده اگه n یک باشه! یعنی n یا صف است یا ۱ . کد PHP: کد: <?php wp_list_cats(’hide_empty=0′); ?> </blockquote> ما میتونیم هر دوی این شرطها رو قرار بدیم اما یادمون نره که باید هرattribute یا مشخصه رو با یک & از هم جدا کنیم: کد PHP: کد: <?php wp_list_cats(’number=3&hide_empty=0′); ?> </blockquote> اگه هیچ دسته ای نساختین میتونین از قسمت دسته ها یا categories چندتا بسازین: کد PHP: http://localhost/wordpress/wp-admin/categories.php </blockquote> در ضمن این توضیح هم خالی از لطف نیست که ما یک تابع دیگه داریم که دقیقا همین کار رو میکنه با این تفاوت که اون نوشته ی Categories که برای عنوان نوشتیم رو خودش مینویسه اما این کار یک ایراد داره و اون زمانیه که ما بخواهیم قالب رو ترجمه کنیم به زبان های دیگه به مشکل میخوریم! برای همین از این تابع استفاده نکردم اما این هم میل خودتان است! تابعی که گفتم اینه: کد PHP: wp_list_categories() </blockquote> حالا نگاهی میندازیم به کار امروزمون،توجه کنید که از تگهایی که از بالا به ترتیب شروع میشن از پایین به ترتیب بسته میشن: <h2 style="text-align: center;"> و دلیل اینکه ۲ تگ رو با ۴ شماره گذاری کردم اینه که هر دو در یک مرتبه قرار دارن یعنی در کنار هم هستن نه داخل هم! تصویر گویای همه چیز هست…
پاسخ : آموزش طراحی قالب وردپرس #۱ آموزش طراحی قالب وردپرس #۶ب(لیست برگه ها) حالا که میدونیم چه خبره و برای اضافه کردن یک چیز به سایدبار باید چه کاری انجام بدیم سریع میریم سراغ یکی دیگه از گزینه هایی که به طور پیشفرض معمولا در هر سایدباری هست، البته انجام اینکار بیشتر به یادگیری کمک میکنه و سود زیادی نداره چون بعدن میشه با چند کلیک ساده اینکارها رو انجام داد. البته این چند کلیک ساده نیازمند اینه که ما قالب رو با widget ها یا همون ابزارکه ها سازگار کرده باشیم، که اون کار رو هم در چند جلسه ی آتی انجام میدیم. میدونیم که از قسمت برگه ها (Pages) در وردپرس میتونیم برگه های مختلفی برای سایت خودمون بسازیم، مثلن برگه ای برای برقراری ارتباط بازدید کننده ها با مدیر سایت و یا صفحه ای برای معرفی و … برای اینکه لیست این صفحات در سایدبار نشون داده بشه ما یک خط کد لازم داریم که این کار رو انجام بده: کد: <?php wp_list_pages () ; ?> </blockquote> دقت کنید این فاصله هایی که من داده ام فقط برای واضح شدن و شما نمیخواد اینکارو انجام بدین. این تابع رو میتونیم هر جا دلمون بخواهد بنویسیم، اما میدونیم تگ li که در درس قبل نوشتیم مربوط به wp_list_cats بود و باید تابع امروز رو اگه میخواهیم بالا قرار بگیره بعد از <ul> قرار بدیم و اگه میخواهیم پایین موضوعات قرار بگیره باید قبل از <ul/> قرار بدیم! حالا فایل index رو سیو میکنیم و در حالی که wamp رو قبلا باز کردیم میریم سایتمون رو ببینیم! میبینیم که خودش همه کارهایی که ما برای تابع قبلی کردیم اتومات انجام داده! البته برای من عنوان “Pages” رو خیلی کوچک نوشته و شبیه همه چیز هست به جز عنوان! برای اینکار هم راه حلی هست! این تابع یک آرگومان مربوط به عنوان داره که ما میتونیم هر عنوانی که بخواهیم براش بزاریم! من میخوام همین کلمه Pages رو داشته باشم فقط کمی بزرگتر، یادتون هست که برای عنوان ها از چه تگی استفاده میکردیم؟! بله از h2 یعنی من میخوام کد زیر رو به عنوان تیتر برای صفحات به مرورگر بفرستم: کد: <h2>Pages</h2> </blockquote> وقتی این نوشته به مرورگر فرستاده بشه اون شبیه این ترجمه اش میکنه: کد: <h2 style="text-align: left;" dir="ltr">Pages </blockquote> خوب اون آرگومان چیه؟ این آرگومان همونطور که از اسمش معلومه (title_li) مربوط به li عنوان است که ما در درس قبل دستی وارد کردیم، حالا کد رو به این صورت تغییر میدیم تا به نتیجه ی مطلوب برسیم: کد: <?php wp_list_pages (’ title_li =<h2>Pages</h2> ‘) ; ?> </blockquote> آرگومان های دیگه ای هم هستن که مثلن یکیشون مربوط به عمق لینک صفحات است! میدونیم که ما میتونیم توی هر برگه هم یک برگه ی اصطلاحن child یا همون بچه برگه!! بسازیم یعنی یک برگه مادر و یک بچه که اون بچه هم میتونه بچه داشته باشه! ما ممکنه ۱۰ تا بچه صفحه داشته باشیم اما بخواهیم نشون دادن اینها توی سایدبار رو محدود کنیم تا شکل سایت به هم نریزه! برای اینکار آرگومان depth=n رو داریم که n عدد ماست یعنی اگه عدد رو مثلن ۲ بدیم فقط مادر و بچه رو نشون میده دیگه بچه ی بچه رو نشون نمیده! آرگومان دیگه sort_order است که اگه برابر با asc قرار بدیمش (که پیشفرض هم همینه!) صفحات رو به ترتیب الفبا مرتب میکنه و اگه مساوی با desc قرارش بدیم برعکس الفبا! آرگومان های دیگری هم هست که بعدن همه رو یاد میگیریم. تابع دیگری هم وجود داره که لیست برگه ها رو به صورت یک dropdown menu (که نمیدونیم فارسی شو چه طوری باید گفت!) فراخوانی میکنه که بنا به سلیقه یا نیاز میتونیم جایگزین تابع بالا کنیم: کد: <?php wp_dropdown_pages() ; ?> </blockquote>
