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

[Cpanelcenter]

جلس اول :

سلام

از امروز شروع میکنیم به یادگیری ساخت یک وب سایت بر پایه وردپرس
اول از همه بگم برای داشتن یه قالب زیبا و جذاب بیشترین تاثیر رو ذوق و سلیقه ی شما داره !
سعی کنید با دیدن سایت های مختلف و دقیق شدن در زیبایی های اطرافتون دید زیبایی پیدا کنین تا بتونین چیزهای زیبا خلق کنید!
طراحی قالب هم مثل نقاشی ، خطاطی ،موسیقی و غیره یک هنره

ما میخواهیم راه این هنر رو یاد بگیریم حالا چند نفر از افرادی که این کار رو بلدن هنرمند میشن ، معلوم نیست!

او کی!
-الف (مواد لازم)

قبل از اینکه شروع کنیم به تهیه مواد این رو بگم که من دارم از صفر شروع میکنم یعنی اگه حتی تا حالا یک خط کد هم ننوشتید و یا تا حالا از اینترنت فقط برای چت و وبگردی استفاده میکردید میتونین به راحتی یاد بگیرین که یک سایت کامل بسازین
مواد لازم برای شروع
یک عدد notepad که توی همه ی کامپیوتر های با سیستم عامل ویندوز هست ، اگر هم از لینوکس یا مک استفاده میکنین ساده ترین ادیتور تکست رو برای اینکار استفاده کنید!
آخرین نسخه ی وردپرس که از این آدرس میتونید به رایگان دریافت کنید



دانلود آخرین ورژن وردپرس (http://wordpress.org/latest.zip)

نامه ی wamp server که میتونید از این آدرس به رایگان دریافت کنید


دانلود برنامه wampserver (http://www.wampserver.com/dl.php)

آپدیت:توجه کنید لینک بالا برای دانلود wampserver در سایت sourceforge (http://www.SourceForge.net) قرار داره که از اوایل بهمن ۸۸ کشور ما رو تحریم کرده و اجازه ی دریافت فایل رو به ما نمیده، اگر در ایران هستید و دسترسی به v.p.n و یا فیــلتر شــکن ندارین میتونین آخرین ورژن این برنامه رو از لینک زیر دریافت کنید.

Wampserver 2.2a 32bit (http://tenet.ir/wp-content/plugins/download-monitor/download.php?id=31)


همین!
این رو هم بگم من تا حالا با مک و لینوکس کار نکرده ام و آموزش هام بر اساس ویندوز هست یعنی دوستان عزیز لینوکسی و اپلی منو ببخشن اگه اطلاعاتم در موردشون ضعیفه!
بگذریم…
فعلا ما دیگه به چیزی نیاز نداریم
اگه از اینترنتی با سرعت پایین استفاده میکنید شاید دانلود wampserver کمی خسته کننده باشه اما ارزششو داره چون قراره یک چیز جدید یاد بگیریم!
در پست بعدی شروع میکنیم به نصب wamp server و وردپرس با توضیح کارایی هر کدام
فعلا بای
منبع : تیتن
tenet.ir

[Mihan-Server]

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

[Cpanelcenter]

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

[Cpanelcenter]

جلس دوم :

سلام علیکم!!

شروع کنین!
خوب میریم سراغ اصل مطلب
تصویر زیر رو نگاه کنید




http://www.webhostingtalk.ir/attachments/f139/12799-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-index-gif

دیدین؟
حالا دقت کنین!
میبینیم که یک قالب تشکیل شده از چند قسمت مختلفه که در کنار هم قرار میگیرن !
البته اکثرن این شکلیه و میتونه به هر صورتی باشه! که فعلا به ما ربطی نداره!
تو قسمت header اسم وبلاگ و توضیحات میتونه قرار بگیره و تو index هم نوشته ها و پست های وبلاگ قرار میگیره یعنی همین جایی که شما میخونین داخل در index می با شد!
در sidebar هم که هر چیزی از جمله widget (ابزارک) های مختلف قرار میگیرن!
در footer هم اطلاعاتی مثل copyright ، نام طراح و …
البته اینها قانون نیستن شما میتونینهر کاری بخواهید انجام بدین مثلا جای index رو با footer عوض کنین!
البته اگه تاب برداشته باشه یه جاییتون! بلانسبت!
نکته ی بسیار خوب وردپرس که در پست قبل ازش گفتم اینجا روشن میشه که :
header و footer معمولا در صفحات مختلف از جمله page.php ، single.php و … تغییر نمیکنند! و این index است که مثلا single.php جایگزینش میشه.
این هم از این!
تموم شد
موظب خودتون باشین، اگه شد!
بای

[Cpanelcenter]

جلس سوم :

سلام

خوب میریم سراغ کارمون

امروز میخواهیم یکمی هم بنویسیم یعنی کار ما داره شروع میشه.

یک بار دیگه تاکید میکنم که وقتی میگم فلان چیز را بنویسید لطف کنید و اون رو بنویسید و کپی نکنید!

قول میدهم به نفع شما خواهد بود وهمچنین قول میدهم ضرری برای من نخواهد داشت!! دروغم چیه؟!! ;) والا به خدا!ا!

خوب اول از همه وسایل کار رو آماده کنید یعنی wamp رو باز کنید ، همینطور notepad رو!

خواهشن از notepad استفاده کنید،نه ویرایشگرهای متن دیگر (البته اگر از notepad ساده تر گیر آوردین بهتره!!)


قبلا یاد گرفتیم که چطوری وردپرس رو روی کامپیوتر نصب کنیم و من اینکار رو در این آدرس انجام دادم:

C:\wamp\www\wordpress

به این فولدر که وارد شدیم محتویات وردپرس رو میبینیم

باید بعد از اون به wp-content و بعد به پوشه ی themes بریمو یک فولدر جدید که اسم قالب خواهد بود بسازیم من اسم قالب رو میزارم amoozesh !
خوب حالا این فایل رو دانلود کنید




index.txt (http://tenet.ir/wp-content/plugins/download-monitor/download.php?id=30)

بعد با notepad بازش کنید سپس به گزینه file رفته و save as رو بزنین و بعد در آدرس زیر با نام index.php سیو کنید.

C:\wamp\www\wordpress\wp-content\themes\amoozesh

خوب؟

خوب!! منم اینکارو کردم بعد هرچی کد تو صفحه بود پاک کردم و دوباره به save as رفتم و اینبار اسم فایل رو style.css گذاشتم!

حالا شما هم اینکارو کنین لطفن!همه چیز فکر میکنم واضح بود به هر حال این عکس رو هم میذارم ببینین چه خبره!

http://www.webhostingtalk.ir/attachments/f139/12797-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-theme-address-gif



خوب یک سری توضیح کوچولو هم میدم در مورد کدی که کپی کردین در فایلindex.php


doctype.در اول صفحه که میبینین و منم میبینم ام نمیدونم چیه! اول همه ی فایل های html میذارن منم گذاشتم! اگه میخواهین بیشتر از اینی که من گفتم!! بدونین برین بسرچین!!


من که علاقه ای به دونستنش ندارم!

تگ < h t m l > به مرورگر ما (web browser ) میگه که کد های زیرش تا جایی که برسه به < h t m l / > به این زبون نوشته شده!

تگ < h e a d> هم قسمتی از صفحه است که بیشتر کار اطلاعات گرفتن و دادن به مرورگر و از سرور و این حرفارو داره یعنی به خواننده سایت کاری نداره! برعکس < b o d y > که بدنه ی وبلاگ و جاییه که ما از سایت میبینیم!


تگ <title> عنوان صفحه رو در بر میگیره که قرار در واقع اسم سایت ما باشه!




<?php bloginfo(‘stylesheet_url’); ?> هم به ورد پرس میفهمونه که بره جایی که stylesheet ما قرار داره که در واقع فایل style.css که ساختیم رو به عنوان طراح صفحه (استایل کننده در واقع) میشناسونه.

بعدا باز بیشتر توضیح میدم الان فقط هدف پر حرفیه!



پس یادآوری شد که هر تگ بین <> است و پایان اون یک / به پشتش اضافه میشه!



حالا یک توضیح در مورد php


میدونیم که وردپرس با زبان php نوشته شده که اگه قویترین زبان برنامه نویسی تحت وب نباشه قطعا دومیشه!

php بر روی سرور ما(یعنی جایی که سایت بر اون هست) یا همون هاست ما نصب هست(یعنی همینی که ما شبیه سازی کردیم توسط برنامه wamp ) وقتی مرورگر وب که داره صفحه رو میخونه تا ترجمه کنه و به ما نشون بده به

<?PHP

میرسه دیگه کاری نداره! یعنی نمیتونه داشته باشه! اینجاست که php که روی سرور نصبه وارد کار میشه و شروع به کامپایل کردن یا همون تجزیه و تحلیل کردن کد میکنه و یک خروجی به مرورگر میده و این کار کامپایل کردن رو تا زمانی که به کد

?>

برسه ادامه میده و بعد …. همینطوری ادامه داره کار تا زمانی که سایت کاملا لود شه و به html ترجمه شه تا ما بتونیم اینجوری که هست ببینیمش!

پس ما هرچیزی که بین php?> , <? مینویسیم باید به زبون php باشه!

و این مساله بدین معنا نمیباشد که باید برنامه نویس باشیم!! پس ترس نداره

یک مورد دیگه اینکه میشه بین این دو بیش از یک دستور نوشت البته باید به این نکته توجه کرد که هر دستور با ; به اتمام میرسه یعنی باید در آخر هر دستور یک ; بگذاریم!

همین دیگه!

بیشتر از این عذاب دهنده نمیشم!

فقط ۵ دقیقه مونده

فایل style.css رو اگه نبستین ببندین دوباره باز کنین! همینجوری!

بعد اینارو کپی کنین توش



/*
Theme Name: Amoozesh
Theme URI: http://www.cpanelcenter.com/
Description: This is my frist theme for a tutorial.
Version: 1.0 beta
Author: Reza Bandari
Author URI: http://www.cpanelcenter.com/




بعد از سیو کردن برین به کنترل پنل یا همون داشبورد وردپرس



http://localhost/wordpress/wp-admin


حالا به Appearance یا همون “نمایش” در وردپرس فارسی برین

میبینین که یک تم جدید ساخته شده به اسم آموزش که Reza Bandari ساختتش و یک سری توضیحات داره البته این اسم رو به اسم خودتون تغییر بدین چون قراره شما تم رو بسازین!


پس فهمیدیم که کدی که اول استایل نوشتیم چه کاری کرد!

حالا این تم رو فعال کنید و برین به صفحه اول سایتتون یعنی همون


http://localhost/wordpress/


میبینین که هیچی نمیبینین که!

اگه چیزی ببینین یعنی اشتباه کردین! =))


امروز هم تمام شد

موفق باشین

بای بای

[GEO]

ممنون از آموزش خوبی که شروع کردید
اگر اموزش خود وردپرس رو انجام بدید فکرک نم مشتاقان بیشتری داشته باشه ، چون اکثرا برای راه اندازی کامل وردپرس مشکل دارند از قبیل افزونه های مختلف ، ابزارکها،منوها ، اسلایدر و ....

موفق باشید

[Cpanelcenter]

ممنون از آموزش خوبی که شروع کردید
اگر اموزش خود وردپرس رو انجام بدید فکرک نم مشتاقان بیشتری داشته باشه ، چون اکثرا برای راه اندازی کامل وردپرس مشکل دارند از قبیل افزونه های مختلف ، ابزارکها،منوها ، اسلایدر و ....

موفق باشید
با سلام خدمت دوست عزیزم
این آموزش رو کامل کنم بعد یک آموزش هم در این راستا قرار خواهم داد برای افرادی که در این مورد مشکلاتی دارن

[Cpanelcenter]

جلس چهارم :
سلام
من آموزش چند روز رو یک بار گذاشتم چون که بتونین به یک جا برسین واسه همین اگه میبنین پشت سر هم گداشتم ولی از الان به بعد دیگه روزی یکی رو میزارم که خوب تمرین کنین تا راه بیوفتین.


خوب لطفا wamp رو باز کنید و به صفحه ی تم amoozesh که دیروز ساختیم برید

C:\wamp\www\wordpress\wp-content\themes\amoozesh

امیدوارم تغییری در فایل index.php ایجاد نکرده باشین! اگه اینکار رو انجام دادین به نوشته شماره۳ رفته و کد رو با من یکی کنید.

توسط مرورگر وبی که استفاده میکنین (که امیدوارم اینترنت اکسپلورر نباشه!!!!) برین به صفحه اصلی سایت

http://localhost/wordpress/

پس الان ۳ تا صفحه باز داریم

فولدر تم آموزش

مرورگر وب در صفحه اصلی

و یک برنامه که یه آهنگ ملایم پخش میکنه!

همینطور که میبینید در صفحه سایتمون هیچی نیست!

خوب، میریم وارد index.php میشیم (با notepad) و بعد از تگ < b o d y > نوشته ی زیر رو تایپ میکنیم!!


کپی نمیکنیم!!!!:-w

<?php bloginfo(’name’); ?>

میدونیم که این یک کد نوشته شده به زبان php است و bloginfo یک تابع است که توسط سازندگان وردپرس ساخته شده و ما فقط اون رو فراخوانی میکنیم.

هر تابع php در مقابل خودش () دارد که میتونه بینش آرگمان های مختلفی باشه یا اصلا نباشه!

bloginfo الان نام (name) سایت رو برمی گردونه(یعنی اسم سایت ما رو به html تبدیل میکنه که نمایش داده بشه)

خوب؟ دیگه بیشتر از این نمیشه توضیح داد!

حالا کلید Ctrl رورو نگه دارین و S رو بزنین تا کارمون ذخیره(save) بشه!

حالا میریم به مرورگرمون که در صفحه ی اول سایتمون قرار داره و کلید F5 رو میزنیم تا صفحه refresh یا به قولی reload بشه.

دیدین؟!!

http://www.webhostingtalk.ir/attachments/f139/12801-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-bloginfo-name-gif



ما در واقع الان با تابع bloginfo نامی که در صفحه ی همگانی (general) تنظیمات (options) میتونیم عوض کنیم رو فراخوانی کردیم.

http://localhost/wordpress/wp-admin/options-general.php

خوب حالا اگه بخواهیم که این نوشته رو به یک لینک تبدیل کنیم که کاربر با کلیک کردن روی نوشته به صفحه ی اصلی سایت بره چی؟

کاری نداره! با استفاده از یک تگ XHTML این کار به راحتی انجام میشه!

بلافاصله قبل از شروع کدی که نوشتیم یعنی php?> کد زیر رو اضافه میکنیم:

<a href=”#”>

و بعد از <? هم این تگ رو که باز کردیم (یعنی تگ a رو) همونطوری که قبلا گفته بودم میبندیم یعنی یک / بهش اضافه میکنیم.

</a>

تا در مجموع داشته باشیم:

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

یادتون نره کپی نکنید چون اصلا کار نخواهد کرد! من هم دیگر تکرار نخواهم کرد این نکته رو!

میبینید که الان نوشته ی ما تبدیل به یک لینک شده که البته با کلیک بر روی اون کار خاصی انجام نمیشه! حالا اگه بخواهیم کار خاصی انجام بشه چی؟

این هم کاری نداره

برای اینکه لینک مارو به صفحه اصلی سایت ارجاع بده باید کد زیر رو جایگذین # بکنید.

<?php bloginfo(“url”); ?>

احتمالا فهمیدین چی شد!

آرگومان تابع bloginfo رو اینبار url انتخاب کردیم که آدرس سایت رو برمی گرداند!!

http://www.webhostingtalk.ir/attachments/f139/12803-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-link-gif



به همین راحتی

به همین …

امیدوارم ابهامی نباشه و بیشتر امیدوارم که ایرادی در توضیحاتم نبوده باشه هرچند فکر میکنم امکانش نیست!

موفق باشید

مواظب خودتون هم باشین، اگه شد!

[Yas-Host]

با سلام
کارتون خیلی خوبه!
یک تایپک جهت سوال پرسیدن نیز باز کنید.

موفق باشید.

[Cpanelcenter]

با سلام
کارتون خیلی خوبه!
یک تایپک جهت سوال پرسیدن نیز باز کنید.

موفق باشید.
با سلام
ممنون از شما دوست عزیزم
باشه چشم حتم این کارو انجام خواهم داد

[Cpanelcenter]

جلس پنچم :

سلام

مثل همیشه میریم به فولدر 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 رو میدیم ، چرا؟ چونکه همه چیزهایی که نوشتیم مربوط به سر تیتر و عنوان صفحه ما بود!

نحوه ی نامگذاری این بچه
dvi
به این صورت است که میبینید

<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>



خوب برای امروز بس میباشد!

مواظب دلتون باشین!

بای

[Cpanelcenter]

جلس ششم :

سلام
اول از همه چیز یک تشکر از مدیر انجمن
GOD (http://www.webhostingtalk.ir/member/5222/)
که حمایت کرد مارو در گذاشتن این آموزش .
و دوم از همه ممنون از همه دوستان و همکاران گرامی بابت تشکرات شما دوستان

wamp،مرورگر وب و فولدر آموزش ما مثل همیشه باز هستن تا درس شماره ۵ رو شروع کنیم!
نفس عمیق!
در درس قبلی ساخت هدر رو تموم کردیم و حالا میخواهیم بریم پایین!
یک تگ نامرئی(div) زیر هدر میسازیم و id اون رو content می نهیم!!! که معنای محتوا رو میده!
در مجموع جلسه قبل و امروز داریم:

http://www.webhostingtalk.ir/attachments/f139/12832-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-untitled-png


همه چیز فکر میکنم واضح بوده و هست فقط یه نکته در مورد کد نویسی و اون اینکه این فاصله هایی که من میدم و شما هم انشاالله میدهید برای چک کردن و دوباره خواندن کد در آینده به ما کمک زیادی میکنه تا گیج نشیم! توجه داشته باشین که به جای استفاده از کلید space برای فاصبه های زیاد مثل خط دوم و سوم این کد از کلید tab استفاده کنید!

خوب حالا در content کد زیر را بنویسید.


<?PHP if (have_posts() ) : while (have_posts() ) : the_post(); ?>


<?PHP endwhile; ?>

<?PHP endif ?>


میدونین حلقه چیه؟


حلقه یعنی اینکه تا زمانی که به چیزی که مد نظر ماست برسیم یک کد تکرار میشه!


الان ما در اینجا حلقه ساختیم! ولی قبل از اون یک شرط گذاشتیم که با if ساخته میشه:

یعنی نوشتیم اگر ( if ) ما پستی (مطلبی) داشتیم برو به مرحله ی بعد اگر نداشتیم برو تا بعد از شرط یعنی بعد از endif !!

حالا در مرحله ی بعد while یک حلقه ایجاد میکنه که تا زمانی که پست داریم یعنی have_posts برقرار است این حلقه تا endwhile میره سر راه the_post رو فراخوانی میکنه و باز برمیگرده!

یادتون هست که گفته بودم هر چیزیو که باز میکنیم به ترتیب میبندیم؟

دلیل اینکه while قبل از if بسته شد هم از اون قانون نشأت میگیره!
خوب میریم و قبل از endwhile تابع the_title رو فراخوانی میکنیم تا مثل درس قبلی که عنوان وبلاگ رو فراخوانی کردیم اینبار عنوان پست یا پست هامون رو فراخوانی کنیم تا داشته باشیم:

<?PHP if(have_posts()): while(have_posts()):the_post();?>


<?PHP the_title() ?>

<?PHP endwhile; ?>

<?PHP endif ?>


کار خودمون رو ذخیره میکنیم و میریم در داشبورد یا همون پیشخوان خودمون تا چند پست امتحانی بدیم!


حتما میدونین که محل پست کردن مطالب جدید در این آدرس است:





http://localhost/wordpress/wp-admin/post-new.php




بعد از اینکه دو،سه تا پست دادیم میریم ببینیم سایتمون در چه وضعیتی است!



http://www.webhostingtalk.ir/attachments/f139/12831-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-the_title-gif


در این عکس صفحه ی ما تا اینجای کار رو میبینید به همراه تابع هایی که در کنار هر کدوم از اثرات خودشون با رنگ قرمز مشخص شده اند!

و میبینیم که عنوان پست های ما پشت سر هم و بیریخت و… در کنار هم توسط the_title فراخوانی شده اند!

خوب اگه ولگرد وب (وب گرد) باشید مثل من! حتما در وبلاگ های مختلف دیدین که با کلیک روی هر عنوان مطلب میتونین به صفحه ی اصلی اون پست برین و در واقع هر عنوان یک لینک به همون مطلبه!

حالا ما همونطور که عنوان سایت رو تبدیل به لینک کردیم این کارو با عنوان مطلب هم میکنیم:




<a href=”#”> <?PHP the_title() ?> </a>




با این کار عنوان هامون تبدیل به لینک هایی شدن که همه سر به یک بیابان میگذارند! و آن بیابان # است!


میتونین با ذخیره کردن صفحه و دیدن صفحه سایت این نکته رو تست کنین.

میبینیم که همه ی عنوان ها تبدیل به لینک های به درد نخوری تبدیل شدن که هیچ غ.. نمیکنن!

اما برای اینکه یه غ… بکنن و لینکشون تبدیل به آدرس اون پست بشه از تابع the_permalink استفاده ، و اون رو جایگزین # میکنیم.


این تابع چون تابع php است میدونیم که چه کنیم:





<a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a>




حله؟


حالا لطفا پاشین یک عدد سیب میل بفرمایین تا چشماتون هم یه استراحتی بکنه و یه ویتامینی چیزی هم برسه به بدن مبارک! البته من سیب ندارم پرتقال میخورم! اینم قبوله! ;)


نوش جان!


حالالینکهامون درست شدن! میدونین که تا اینجا چی شد؟!

حلقه while به تعداد پست هایی که داریم میره و خط زیرش رو تکرار میکنه و یک کار رو با همه ی اونها انجام میده! یعنی عنوان پست رو تبدیل به لینک همون پست میکنه و میره سراغ پست بعدی!

حالا با این شکل ناجور چه کنیم؟!

یادتون هست که گفته بودم header چیست و تگ مربوط به اون در xhtml چیه؟

این عنوان ها هم header هستند دیگر!؟

خوب خط کدی که نوشتیم رو بین تگ h میگذاریم تا ابهت یک عنوان رو داشته باشه! اما این بزرگی به عظمت نام و عنوان سایت ما نیست!! پس به جای h1 از h2 که کمی کوچکتر است استفاده میکنیم! سپس save و refresh!!

دیدین چی شد؟





<h2> <a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a> </h2>




خوب منم دیدم! تازه داریم یه کارایی میکنیم!


در درس بعدی کار قشنگی میکنیم که اونم نشون دادن متن پست های قشنگون است!!

برای این درس فکر میکنم بس باشد.

موفق باشین

مواظبت نمایید!

بابای…

[shazo]

سلام مرسی ادمه بدین.. تاپیک مفیدی به نظر میاد

[Cpanelcenter]

سلام مرسی ادمه بدین.. تاپیک مفیدی به نظر میاد

با سلام خدمت شما دوست عزیز ممنون از شما بله 100% ادامه خواهد داشت این آموزش

[Cpanelcenter]

جلس هفتم :

سلام
یک مرور کوچیک میکنیم ببینیم تا حالا چی یاد گرفتیم

اول فهمیدیم وردپرس اصلا چی هست و چه میکند!


بعد مواد لازم رو تهیه کردیم و شروع کردیم به نصب وردپرس روی کامپیوتر شخصی برای تست سریع برنامه و قالب ها!


در درس شماره ۱ فهمیدیم تگ ها و قانون مهم اونها چیه و همچنین قالب وردپس از چی تشکیل شده!


درس شماره ۲ که خیلی هم ساده بود یک نمای کلی از یک قالب معمولی وردپرس به ما نشون داد.


در درس شماره ۳ یک قالب جدید با نام amoozesh ساختیم و فایل های index.php و style.css رو ساختیم.


درد درس شماره ۴ تونستیم نام وبلاگ رو در بالای صفحه بارگذاری کنیم. یعنی شروع ساخت header


درس ۴ باز هم ادامه پیدا کرد و توضیحات سایت هم در زیر اسمش اومد تا ساخت header به پایان برسه.



در درس ۵ یک کار مهم رو شروع کردیم و یک حلقه ساختیم که لیست مطالب رو فراخوانی میکرد.


و حالا میخواهیم درس مهم شماره ۵ رو ادامه بدیم:

مثل همیشه برنامه ها و فولدر های مورد نیازمون رو باز میکنیم.

در درس قبل به اینجا رسیدیم که وبلاگمون دارای اسم، توضیحات و لیست مطالب هست.

خوب میدونیم که مطالب ما الان دیده نمیشن

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





<h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2>




نوشتیم کد زیر رو اضافه کنیم:





<?PHP the_content();?>




به همین راحتی content یا محتوای پست رو فراخوانی میکنیم، کار رو ذخیره کرده و میریم سایتمون رو ببینیم!


به این ترتیب متن نوشته ها هم در صفحه ظاهر میشه و صفحه ما شامل: عنوان سایت،توضیحات سایت،عنوان پست ها به همراه متن اونهاست!

ما در حال حاضر یک سایت نیمه کامل و البته بسیار بد شکل و قیافه داریم که اصلا ترس نداره!

بعدا با استایل کردن میتونیم بسیار زیبا و شکیلش کنیم.(با کمک فایل style.css )

میبینیم که یک خط کوتاه کد php که نوشتیم چه میکنههههه!!!

احتمالا میدونین که اگه خودتون میخواستین با html این مطالبی که نوشتین رو بعد از وقت گذاشتن بسیار زیاد بنویسین احتمالا از نوشتن پشیمون میشدین!

خوب بریم سر تمیز کاری!

یادتون میاد که در درس header کل کدهای مربوط به قسمت بالایی صفحه رو بین تگی نامرئی(div) با شناسه ی header گذاشتیم و در پایین اون یک تگ نامرئی دیگه ساختیم با نام content که کل محتوای صفحه رو در بر میگیره! حالا ما درمحدوده ی content قرار داریم و میخواهیم که محتوای عنوان نوشته ها و محتوای اونها رو از بقیه قسمت های صفحه متمایز کنیم و نامهایی مناسب براشون انتخاب کنیم.

برای اینکار پیشنهاد من این است که یک نام مناسب برای عنوان هر پست و همچنین یک نام برای متن پستها انتخاب کنیم!

برای اینکار ابتدا یک تگ div برای عنوان پست به این صورت:





<div class=”posttitle”>

<h2><a href=” <?PHP the_permalink() ?>”> <?PHP the_title() ?> </a></h2>



</div>




و یک تگ هم برای محتوا به این صورت:





<div class=”entry”>

<?PHP the_content();?>

</div>




میسازیم، میدونیم که این دو تگ(یعنی posttitle و entry ) با هم تشکیل گروه بزرگتری رو میدن که همان پستهای ماست پس هر دوی تگ ها رو با نام post به هم مربوط میکنیم:





<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>




احتمالا این سوال پیش اومده که چرا به جای id یه تگ ها class دادم!!؟


اصلا فرقشون چیه؟

جواب اینه که فرق زیادی ندارن فقط موضوع مورد توجه اینه که class در صفحه n بار تکرار میشه اما id یگانه است!

در واقع مثل اسم عام و اسم خاص میمونه! ما فقط یک برج ایفل داریم اما n تا برج داریم!! اوکی شد؟!

اوکی…

دیگه چیز خاصی برای این درس نمیمونه جز اینکه بگم حتمن حتمن حتمن گوگل کروم رو دانلود کنید!

کاری ندارم که مرورگر خوبی هست یا نه اما برای درک اینکه ما داریم چیکار میکنیم بسیار زیاد کمکمون میکنه!

هرچند یک افزونه برای فایرفاکسی ها هم بود(اسمش رو یادم نیست اما یک bug داشت و عکسش هم یه سوسک بود:d ) که کاری که من میخوام توضیح بدم رو انجام میداد اما من کروم رو برای اینکار پیشنهاد میکنم!

با این کروم عزیز بعدها خیلی کار داریم چون میدونم خیلی ها مثل من سرعت بالایی دارن!! گفتم زودتر بگم که شروع به دانلود کنید!!

در ضمن اگه ایرادی داشتم گوشزد کنید لطفن! مرسی…

فعلا بابای بای بای بابای بای

[Cpanelcenter]

جلس هشتم :

سلام


شما ممکنه اسن صفحه رو سیو کنید یا به هر صورت بخوایین offline بخونید این درس رو پس قبل از دیسکانکت شدن این فایل رو دانلود کنید که باهاش کار داریم:

post-meta-data (http://tenet.ir/wp-content/plugins/download-monitor/download.php?id=1)

ما ساخت هدر رو تموم کردیم و رسیدیم به عنوان و محتوای پست!

امروز میخواهیم گزینه های مربوط به هر پست مثل دکمه ی نظر خواهی، تاریخ، موضوع پست و … رو در یر هر پست بیاریم

به همه ی اینها معمولا postmeta یا post meta data میگن.

میشه تقریبا “اطلاعات مربوط به پست” ترجمه اش کرد!

اون فایل که دانلود کردین رو تمامن کپی کنید و زیر the_content قرار بدین.

باید حداقل ۷۰ ، ۸۰ درصدش رو بفهمین ، به هر حال کمی توضیح میدم ولی قبلش یک چیزی در مورد php:
ما در زبان php یک تابع داریم (که در php هست!یعنی ما نمیسازیمش!) به نام echo که کارش اینه که متنی که جلوش میزاریم رو عینن و دقیقا و کاملا و… به صورت خروجی میده، مثلن:



<?PHP echo(‘salam aleykom va rahmatollah!!!’) ?>




خوب فکر نمیکنم php چیزی که ما نوشتیم رو بفهمه!!یعنی مهم نیست ما جلوی echo چیز معنی داری بنویسیم یا نه اون کار خودش رو میکنه!

خروجی:

salam aleykom va rahmatollah!!!

اوکی؟!

خوب حالا ما در وردپرس تابعی داریم به این صورت: e_

تا اینجا بدونین که این تابع همین کار رو انجام میده! یعنی چیزی که جلوش مینویسیم رو عینن خروجی میده!

یعنی اینکه ما مثل آدم میتونیم بنویسیم:

Field under:

به جای اینکه اون رو به صورت یک تابع php بنویسیم البته بعدن میفهمیم چرا این کار رو کردیم!

کد زیر هم در کنار کلمه Field under همون دو نقطه ی خودمونه! ( : ) اما اگه ما : بزاریم و از وردپرس فارسی هم استفاده کنیم کلمه به فارسی ترجمه میشه و شکل کار رو خراب میکنه هرچند این قسمت هم دل بخواه است!




:



از این واضح تر بلد نیستم بگم!


حالا مشکل ۲ خطمون در post meta data حل شد! یعنی خط اول و سوم کلمات Field under و By رو به خروجی میدن!

the_catgory تابعی است که موضوع یا موضوعات پست رو به ما میده و (‘ ,’) در جلوش یعنی اگر مثلا مطلب ما به ۳ موضوع مربوط بشه، موضوعات رو با ۲ عدد , از هم جدا میکنه و ما میتونیم مثلا به جاش – بزاریم:


موضوع۱,موضوع۲,موضوع۳


این هم حل شد!

the_author هم تابعی است که نویسنده ی مطلب رو نشون میده، یعنی اگر شما بیش از یک نویسنده در سایت داشته باشید این نشون میده چیو کی نوشته!

comments_popup_link هم از اسمش معلومه یعنی لینکی رو میده که کاربران با کلیک بر روی اون میتونن نظر خودشون رو در رابطه با مطلب بنویسن!

از اونجایی که مردان و زنان انگلیسی زبان یک s برای جمع بستن دارن!! برای همین وقتی ۱ نظر داده شده باید نوشته بشه ۱comment برای همین no comments و ۱comment و n comment رو به صورتی که میبینید از هم جدا کردن تا در هر صورتی که هست درست نمایش داده بشه! در ضمن اون % تعداد نظرات داده شده رو نشون میده،(البته نیازی به حفظ کردن نیست در این قسمت،مهم اینه که بفهمیم چه کردیم!)

مورد دیگه در مورد pop up!

pop up همون صفحه ایست که وقتی میریم توی سایت مزخرف(نمیدونم املاش چه جوریه!) میبینیم که یک صفحه دیگه هم باز میشه از اون مزخرفتر! که معمولا تبلیغاتیه! البته قبلا خیلی بیشتر بود این مسائل اما الان با pop up blocker ها جلوی این صفحه ها توسط مرورگر های جدید گرفته میشه!

به هر حال همیشه اینطور نیست و pop up کاربرد هم داره! مثلا اگه ما popup comment رو در قسمت مدیریت فعال کنیم بازدید کننده های سایت با کلیک بر روی این لینک یک صفحه جدید(به صورت popUp) میبینن که میتونن نظرشون رو بدن و اگه غیر فعال باشه به صفحه ی اصلی مطلب میرن که زیرش هم میتونن نظر بدن!

edit_post_link هم دکمه ی edit رو میزاره برای کسی که مطلب رو نوشته و یا مدیر کل سایت که اگه خواستن متن رو تغیر بدن (زیاد مهم نیست البته!) آرگومان اول هم که edit باشه کلمه ای است که این لینک نشون میده و میتونه هر چیزی باشه! مثلا tashih یا هر چیزی که دوست دارین/داریم/دارند/داشتیم و … آرگومان دوم هم نوشته یا علامتی است که کلمه ی اول (در اینجا edit) رو از نوشته های قبل جدا میکنه.یعنی قبل کلمه edit میاد و آرگومان سوم بعد از کلمه edit میاد، به کد زیر و خروجی اون توجه کنید لطفن:



کد:



<?php edit_post_link(‘Tashih’, ‘*’, ‘#’); ?>



خروجی:



*Tashih#




حالا میل خودتونه که میخواهید چه کنید!


کارمون رو ذخیره میکنیم و میریم ببینیم سایت در چه وضعیتی به سر میبره!

زیر پست من به صورت زیر شده:




Filed under: دسته‌بندی نشده با admin
No Comments » | Edit



البته من لینک هارو غیر فعال کردم ! شما با کلیک بر روی موضوع باید به صفحه ای ارجاع داده بشین که تمام مطالب با اون موضوع رو نشون میده و با کلیک بر روی comments به صفحه ای که فقط در اون یک مطلب وجود داره و اون هم مطلبی است که در بالای این post meta وجود داره!


در مورد تگ <P> هم بگم که از کلمه paragraph به معنی پاراگراف خودمون یا همون بند هست،یعنی بینی این تگ هر چه باشد در یک پاراگراف قرار میگیره.

کلاس هم که در درس قبل گفتیم چیه.یعنی گفتم چیه!

امروز کار خاصی نکردیم!

فقط یه چیز دیگه هم هست! مثلا ما میخواهیم یک چیزی رو کم کنیم از این کد یا یه چیزی اضافه کنیم!

مانعی نداره اما حواستون باشه چیکار میکنید!

مثلا من میخوام بعد از اینکه نوشته شد : by admin تاریخ پست هم اضافه کنم

برای اینکار از تابع the_time استفاده میکنم!
به همین راحتی که قبل از </br > کد زیر رو میزارم:



<?php _e(‘on’);?><?php the_time(‘F jS, Y’);?>





بعدا بهتون میگم به چه راحتی میشه کد ها و توابع وردپرس رو یادگرفت و یا حتی یاد نگرفت اما استفاده کرد!


اگه قول بدین تنبل نمیشید درس تمومه!

فقط یه مطلب دیگه!

اگه در مورد کدهای مخفی html مثل همون دو نقطه و غیره مرجعی خواستین به لینک زیر سری بزنید:


html-character-entities-cheat (http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/)
کاراکتر های مخفی در فرمت png (http://tenet.ir/wp-content/plugins/download-monitor/download.php?id=2)
کاراکتر های مخفی فرمت pdf (http://tenet.ir/wp-content/plugins/download-monitor/download.php?id=3)



اگه نفهمیدین چیزی رو حتما دوباره بخونین چون باید میفهمیدین! یعنی حواستون پرت بوده است!!


سو…

همین دیگه

از خط عابر عبور کنید!

بابای

[Cpanelcenter]

سلام مرسی ادمه بدین.. تاپیک مفیدی به نظر میاد

با سلام خدمت شما این درس ادمه خواهد داشت و روزانه قرار خواهید گرفت در سایت

[ehsan_296]

چرا بن شد ؟ خوب داشت پیش می رفت که :)

[SAJJADSAA]

اگه یک نگاه کلی به کل کارهایی که انجام دادیم بندازیم میفهمیم که یک if داریم به معنی: “اگر برقرار باشد” منظورم خط زیر است:

<?PHP if(have_posts()): while(have_posts()):the_post();?>
که اگر پست داشته باشیم کد زیرش رو میخونه اما اگر نداشته باشیم چی!؟
یعنی مثلا ما هیچ پستی ننوشتیم یا در اون زمینه ای که بازدید کننده دنبالش میگرده ننوشتیم!
خوب برای فهماندن جمله ی: “اگر شرط برقرار نبود” به php کد زیر رو بلافاصله بعد از endwhile مینویسیم:

<?php else : ?>
<div class=”post”>
<h2><?php _e(‘Not Found’); ?></h2>
</div>
باید فهمیده باشین چی شد
ما در واقع یک صفحه ی خطا ساختیم که اگر پست مورد نظر پیدا نشد نوشته ی Not Found به معنای “پیدا نشد” نمایش داده میشه و همونطور که قبلا هم گفتم میتونیم هرچیزی جایگزین این جمله بکنیم!
مثلا من میرم به آدرس زیر و با پیغام خطا مواجه میشم:

http://localhost/wordpress/?cat=789
چون من در دسته بندی هام مثلا ۱۰ تا موضوع دارم نه ۷۸۹ تا! و چون جایی رفتم که وجود نداره با این پیغام که “پیدا نشد” مواجه میشم! این رو هم اضافه کنم که اگه این کد رو نمینوشتیم اتفاقی نمی افتاد فقط Not Found نمایش داده نمیشد! همین!
پس فهمیدیم که while با endwhile بسته شد و if با else که عکس اون عمل میکنه ادامه یافت!:
http://www.tenet.ir/wp-content/uploads/2009/05/if-endif.gif
توضیح:قرمز ها تابع، و همرنگ ها مربوط به همند.
حالا در مورد پست ها!
وقتی نگاهی به source سایتمون بکنیم میفهمیم که تمام پستها با یک کلاس (post) شناخته شده اند!
اما هر پست برای خودش پستیه!! و یک آی دی یا شناسه میخواد که اون رو از بقیه پست ها متمایز کنه!
برای اینکه به پست هامون یک آی دی مناسب بدیم به صورت زیردر کنار کلاس post :

id=”post-<?php the_ID(); ?>”
یک خط کد مینویسیم، تابع the_ID تابعی است که کارش اینه که به هر مطلب یک شماره ی منحصر به خودش رو میده
حالا بعد از ذخیره کار میریم و با گوگل کروم که گفتم دانلود کنید و یا با فایرفاکس و افزونه مورد نظر ما (که اسمش رو یادم نبود و الان هست!) یعنی افزونه ی Firebug سایت رو باز میکنیم:
در کروم با کلیک راست روی قسمتی از صفحه (مثلا هدر) و کلیک بر روی آخرین گزینه (Inspect element) صفحه ای باز میشه که سورس رو بسیار واضح و عالی مرتب کرده و بر روی هر قسمت کد که بریم اون قسمت با رنگ زرد در صفحه مشخص میشه و ما می فهمیم هر کد مربوط به کدام قسمت است!
مثل عکس میبینیم که به هر پست یک آی دی منحصر به خودش داده شده که اون رو از بقیه جدا میکنه!
عکس زیر رو باز کنید (به علت حجم نسبتا زیاد باید روی عکس کلیک کنید و ذغالی ها هم صبور باشید لطفن!!)
http://www.tenet.ir/wp-content/uploads/2009/05/chrome-150x150.gif (http://www.tenet.ir/wp-content/uploads/2009/05/chrome.gif)
در فایر فاکس هم Firebug دقیقن (شایدم تقریبن) همین کار رو انجام میده که میتونین ازش استفاده کنید.
اگه نمیتونین اعداد رو ببینین یا ساختار شکل من با شما فرق داره میتونین عکس زیر رو ببینین و اشکالات احتمالی رو رفع کنین!
تصویر کدهای نوشته شده تا امروز (http://www.tenet.ir/wp-content/uploads/2009/05/till-5c.gif)

این هم از این!
حالا برین به صفحه سایت و روی یکی از عناوین پست ها موس رو نگه دارین!
میبینین که چیزی نمی نویسه، برای اینکه مثلا همون عنوان رو هم بنویسه میتونیم از title استفاده کنیم که دقیقا مثل href برای تگ a ، عنوان یا title هم یکی از ویژگی هاست که میشه به این تگ نسبت داد،پس کد عنوان ما به این صورت میشه:

<a href=” <?PHP the_permalink() ?>” title=”<?PHP the_title() ?>”>
<?PHP the_title() ?>
</a>
من title رو با استفاده از تابع ()the_title فراخوانی کردم، با ذخیره و refresh کردن میفهمیم که چه تغییری پیش اومد.
حالا اگه با inspect element یا حتی دیدن source سایت قسمت عنوان یکی از پست ها رو پیدا کنیم میبینیم که title هم اضافه شده بهشون!
اینکار شاید برای ما و حتی بازدید کننده ها سودی نداشته باشه اما برای روبوت ها ی سایتهای مختلف که سایت مارو اسکن میکنن میتونه مفید باشه! که بفهمن title ما چیه و از این حرفا!
میدونیم که در ورد پرس مثل بقیه سرویسهای وبلاگ یک حد اکثری برای نوشته ها هست یعنی مثلا در وبلاگ من بیشترین تعداد مطالب ۵ عدد است! که البته از قسمت مدیریت میشه اون رو تغییر داد!
حالا اگه ما تعداد مطالبمون زیادتر باشه چی؟
حتما به دکمه ای نیاز داریم که مارو به صفحات دیگه ببره یعنی مثلا صفحاتی که هر کدوم ۵ پست دارن!
در درس بعدی یاد میگیریم دو کلید “بعدی” و “قبلی” در انتهای وبلاگ قرار بدیم.
فعلن بابای
منبع : آموزش طراحی سایت | TeneT (http://tenet.ir/tutorial-list/)

[SAJJADSAA]

تمام مواد لازم رو باز میکنیم و میریم به index.php و شروع میکنیم به کار تا امروز پرونده ی درس ۵ رو ببندیم تا به ن و ه ی نرسیده!!!
گفتیم که میخواهیم یک “قبلی” و یک “بعدی” که به صفحات قبلی و بعدی میرن لینک بدیم!
این گزینه ها زمانی به کار ما میان که ما پستی نوشته باشیم و حتی بیشتر از اون حدی که نوشتیم هم نوشته باشیم! بنابراین کدی که میخواهیم بنویسیم زمانی است که شرط if برقرار باشه! یعنی قبل از else که خلاف اونه و بعد از endwhile کدمون رو مینویسیم.

<div class=”navigation”>
<?PHP posts_nav_link(); ?>
</div>
برای این هدایت کننده (navigator) هم یک div تگ ساختیم که بعدا بتونیم کارایی که میخواهیم رو انجام بدیم و در ضمن جداش کرده باشیم از بقیه قسمت ها… این نکته هم میدونیم که میتونیم حد اکثر تعداد پست های هر صفحه رو از Options > Reading :

http://localhost/wordpress/wp-admin/options-reading.php
عوض کنیم و کمترش کنیم تا بتونیم نتیجه کاری که کردیم رو ببینیم.من این مقدار رو ۲ کردم!
ذخیره کنیم و ببینیم چه کرده ایم!
میبینید که در زیر صفحه یک جمله ی Next Page اومده که با کلیک کردن روش میریم به صفحه بعدی…
علامت « هم که میبینید یکی از اون کدهای مخفی html است که در درس قبلی گفتیم و پیش فرض تابع posts_nav_link است.
البته این تابع هم انعطاف پذیری داره و میتونیم با ۳ آرگومان تغییرش بدیم:

<?php posts_nav_link(’in between’,’before’,’after’); ?>
اگه تعداد صفحات ما حداقل ۳ صفحه باشه و ما بریم به صفحه ای به غیر از اولی و آخری هم یک “صفحه قبی” داریم و هم یک “صفحه بعدی” که بین این دو اولین آرگومان این تابع است! مثلا من میخوام بین این دو نوشته ### باشه!!
آرگومان بعدی برای جایگزین کردن نوشته ی Previous Page» است و دومی برای جایگزینی «Next Page :

<?php posts_nav_link(’###’,’ghabli’,’badi’); ?>
http://www.tenet.ir/wp-content/uploads/2009/05/pages_nav_link.gif
حله؟!
البته من اینکار رو برای واضحتر کردن این قضیه کردم و نیازی نیست انقدر بیریختش کنید:d
امروز قسمت Content هم تموم شد یعنی ما تا امروز Header و Content سایت رو ساختیم و باز هم یعنی که نصف راهو رفتیم!
میمونه Sidebar یا کناره ی سایت و Footer که پایین سایتمون رو در بر میگیره!
یک نگاه کلی به توابع مهمی که تا حالا یاد گرفتیم و به کار بردیم در این عکس بندازیم:
http://www.tenet.ir/wp-content/uploads/2009/05/till-5-func.gif
درس سبکی بود نه؟
اشکال نداره! سنگینم میشه!
بابای فعلا…
منبع : آموزش طراحی قالب وردپرس #۵ث(هدایتگر صفحه) | TeneT (http://tenet.ir/1388/02/14/wp-design-5e-page-navigation/)

[SAJJADSAA]

جلسه 11
امروز میریم سراغ یکی دیگر از قسمتهای مهم هر سایت، یعنی سایدبار یا ستون کناری که میتونیم بسیاری از کاربردها و ابزارک ها رو در این قسمت قزار بدیم.
میدونیم که وردپرس قسمتی داره به نام ابزارک ها یا widgets که ابزارهایی رو برای قالب ما در خودش جا داده و ما میتونیم این ابزار ها رو از سایت وردپرس یعنی wordpress.org پیدا و دانلود کنیم.
برای اینکه قالب ما بتونه از ابزارک ها استفاده کنه یا اصطلاحن widgetize بشه باید یه کارهایی انجام بدیم که قعلن کاری نداریم به اون قضیه ! فقط خواستم بدونین این کلمات قلمبه سلنبه(املاشو بلد نیستم:d) چیز خاصی نیستن و یک خط کد کارشه!
حالا میریم وارد بحث سایدبار بشیم و چند تا امکان پیش فرض براش قرار بدیم.
میدونیم که header و content و sidebar و footer از هم جدا هستن!
یعنی div هاشون توهم نمیرن!
همونطوری که بعد از بسته شدن تگ header رفتیم سراغ content حالا بعد از آخرین <div/> که مربوط به content هست یک div با کلاس sidebar میسازیم:


<div class=”sidebar” >
</div>
شاید این سوال پیش بیاد که ما چرا برای header و content از آی دی که منحصر به فرد هست استفاده کردیم! ولی برای سایدبار از کلاس؟
و جواب اینه که ممکنه ما بخواهیم ۲ سایدبار داشته باشیم! و برای اینکه بتونیم با هر دوشون یک کار رو انجام بدیم دادن کلاس میتونه مفید باشه!
البته الان ما هدفمون اینه که کارهای پایه رو یادبگیریم، یعنی حداقل دانشی که برای طراحی قالب هست!
بعد از اتمام این سری درس میریم سراغ طراحی یک قالب کامل با تمام ابزار ها و امکانات که در اونجا تکنیک های مفیدی یاد خواهیم گرفت.
بریم سراغ درس، یک تگ ul که مخفف unordered list است رو در محدوده ی sidebar باز میکنیم و میبندیم تا داشته باشیم:
<div class=”sidebar”>
<ul>
</ul>
</div>

تگ ul در واقع برای لیست کردن نوشته های ماست، مثلا نوشته زیر در این تگ قرار گرفته:

این یک نمونه از تگ ul است.
این یک نمونه دیگراین تگ است!!

میبینیم که یک نقطه تو پر هم در کنار هر جمله میاره.
حالا بین این تگ رو با یک تگ li یا لیست پر میکنیم و با تابعی که قبلا یاد گرفتیم یعنی e_ نوشته Categories رو فراخوانی میکنیم:


<li>
<?php _e(‘Categories’) ?>
</li>
احتمالا فهمیدین که این کارها برای نوشتن عنوان قسمتی از سایدباره که دسته بندی موظوعات سایت رو در خودش جا میده!
یادتون هاست که برای عناوین از چه تگی استفاده کردیم؟!
از تگ h2 استفاده میکنیم و کد رو به شکل زیر تغییر میدیم:

<li>
<h2> <?php _e(‘Categories’) ?> </h2>
</li> میتونیم تا اینجای کار رو ذخیره کنیم و به سایتمون سر بزنیم و ببینیم که یک


Categories

در وردپرس انگلیسی و یا یک


دسته ها

در وردپرس فارسی اضافه شده به انتهای صفحه مون.
حالا باید کدی بنویسیم که دسته بندی های ساین رو فرا خوانی کنه و لیستش رو زیر نوشته ی ” دسته ها ” قرار بده
برای اینکار در داخل تگ li که نوشتیم و بعد از پایان تگ h2 کد زیر رو مینویسیم:


<ul> <?php wp_list_cats(); ?> </ul>
این تابع آرگومان های بسیاری داره که بعدن مفصل حرف میزنیم راجع به این موضوع، فقط تا این حد بدونین که:
مثلن number=n تعداد n عدد موضوع رو نشون میده!
یا hide_empty=n دسته هایی که هیچ نوشته ای ندارن رو نشون میده اگه n صفر باشه و نشون نمیده اگه n یک باشه! یعنی n یا صف است یا ۱ .

<?php wp_list_cats(‘hide_empty=0′); ?>
ما میتونیم هر دوی این شرطها رو قرار بدیم اما یادمون نره که باید هرattribute یا مشخصه رو با یک & از هم جدا کنیم:

<?php wp_list_cats(‘number=3&hide_empty=0′); ?>
اگه هیچ دسته ای نساختین میتونین از قسمت دسته ها یا categories چندتا بسازین:

http://localhost/wordpress/wp-admin/categories.php
در ضمن این توضیح هم خالی از لطف نیست که ما یک تابع دیگه داریم که دقیقا همین کار رو میکنه با این تفاوت که اون نوشته ی Categories که برای عنوان نوشتیم رو خودش مینویسه اما این کار یک ایراد داره و اون زمانیه که ما بخواهیم قالب رو ترجمه کنیم به زبان های دیگه به مشکل میخوریم! برای همین از این تابع استفاده نکردم اما این هم میل خودتان است! تابعی که گفتم اینه:

wp_list_categories()
حالا نگاهی میندازیم به کار امروزمون،توجه کنید که از تگهایی که از بالا به ترتیب شروع میشن از پایین به ترتیب بسته میشن: http://www.tenet.ir/wp-content/uploads/2009/05/sidebar-cat.gif
و دلیل اینکه ۲ تگ رو با ۴ شماره گذاری کردم اینه که هر دو در یک مرتبه قرار دارن یعنی در کنار هم هستن نه داخل هم! تصویر گویای همه چیز هست…
نه خسته!!
بابای
نویسنده آموزش آقای کشمیری