دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۱۱(استایل سایدبار)

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

در درس امروز سراغ سایدبار میریم تا محتوای اون بهتر نمایش داده بشن و با widget یا همون ابزارکهای مختلف سازگارتر باشه تا بهتر نمایش داده بشن.

در حالت استاندارد در ابزارک ها از تگ های ul و li استفاده میشه (مثل آنهایی که خودمون دستی وارد کردیم در بخش سایدبار) به همین دلیل کافیه که این تگ ها رو به همراه تگهای هدینگ (Hn) هدف قرار بدیم.

برای اشاره به تگهای ul موجود در sidebar باید به صورت زیر عمل کنیم و کدهای زیر رو بنویسیم (کدهای زیر رو بعد از .sidebar و قبل از footer در فایل style.css بنویسید):

.sidebar ul{
margin: 0;
padding: 0 10px 0 10px;

}

میدونیم یا اگرم نمیدونیم از این به بعد میدونیم! که تگ های ul به طور پیش فرض یک margin و padding دارند که ما با این کار اونها رو تحت کنترل خودمون قرار میدیم تا هر مرورگر ساز خودش رو نزنه!

حالا در حالی که مثل همیشه wamp باز است با دو مرورگر FF و IE صفحه ی اول سایت رو میبینیم.

برای برداشتن نقطه های توپر و تو خالی باید یک راهی پیدا کنیم چون خیلی زشتن وجدانن:

.sidebar ul{
margin: 0;
padding: 0 10px 0 10px;

list-style:none;
}

این کار باعث میشه اون نقاط زشت پاک بشن، با دوباره دیدن سایت از این عمل مطمئن میشیم.

اگر با inspect element در chrome یا firebug به سایدبار بریم و نگاهی به شکل ابزارها بندازیم میفهمیم که تگ ها به چه صورتی هستند:

حالا برای هدف قرار دادن li های درون ul های sidebar به صورت زیر عمل میکنیم:

.sidebar ul li{

padding: 5px 0 5px 0;

}

این کد باعث میشه یک فاصله ی ۵ پیکسلی از بالا و یکی هم از پایین ایجاد بشه.

برای هدف قرار دادن هر تگ برای اینکه بدونین دقیقا چه آدرسی باید بدین بهترین راه inspect element است و بس! با اینکار حتی میتونین در سایت ها و وبلاگهای دیگه هم فوزولی نموده و چیزهای جدید یاد بگیرین!

حالا بریم سراغ عناوین هر ابزار موجود در سایدبار!

اگه یادتون باشه ما از تگ h3 استفاده کردیم برای اینکار!

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

.sidebar h2{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

}

ما با این کار باعث میشیم که همه ی مرورگر های سایز فونت رو ۱۴ پیکسل قرار بدهند.

حالا با دقیق تر شدن میتونیم به آدرس sidebar-ul بریم و بعد هرچه li مربوط به ul میشه رو هدف قرار بدیم:

.sidebar ul ul li{

padding:0;

}

حالا سایدبار بهتر و شکیل تری داریم و میتونیم شکیل تر ترش کنیم!:

.sidebar ul ul li{

padding:0;

line-height:22px;

}

پیشنهاد میکنم line-height رو اول یک عدد کوچک مثل ۱۰ قرار بدین و بعد از دیدن سایت با اون حالت اون رو به هر عددی دوست داشتین تغییر بدین، اینکار رو انجام میدیم که بفهمیم دقیقن چه کاری میکنیم.

حالا شاید این سوال پیش بیاد که برای هدف قرار دادن یک ابزار خاص چیکار باید کرد!

جواب اینه که باید دنبال ID طرف بگردیم!

این کار رو هم با دیدن source که سخت تر خواهد بود و یا با استفاده از inspect elements میشه انجام داد.

مثلا برای تغییر دادن Calendar(فقط Calendar و نه چیز دیگه ای) باید بریم و آیدی اش رو پیدا کنیم:

بعد از پیدا کردن آی دی مورد نظر میتونیم به صورت زیر تغییراتی انجام بدیم مثلا :

#wp-calendar{

width:80%;

margin:auto;

}

این کار باعث میشه سالنامه یا تقویم نوشته های ما به اندازه ی ۸۰ درصد اندازه ی سایدبار کشیده بشه و با margin کاری کردیم که در وسط قرار بگیره.

خسته نباشید دیگه! پلیز!

بابای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۶ث(پایان سایدبار)

سلام اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

امروز کار سایدبار رو تموم میکنیم و مهمترین کار هر سایدبار (یعنی سازگاری با ابزارکها) رو انجام میدیم.

قبل از هر کاری این فایل رو دانلود کنید:

functions

و بعد طبق معمول با فرمت php درشاخه ی amoozesh ذخیره کنید.

اگه یک نگاهی به این فایل بندازیم میفهمیم که کارش ثبت کردن ۱ سایدبار است(البته این عدد میتونه تغییر کنه و حتی از سایدبار با هرجای دیگه مثل فوتر و هدر بره!)

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

اگه یادتون باشه گفته بودم که یکی از ساده ترین کارها widgetize کردن است:

۱- میریم به index.php

۲- div سایدبار رو پیدا میکنیم، بعد از <ul> کد زیر رو مینویسیم:

<?php if ( function_exists(’dynamic_sidebar’) && dynamic_sidebar() ) : else : ?>

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

اگه کرده باشیم که نشونش میده اما اگه نکرده باشیم چی؟!

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

اما یک نکته که میمونه اینه که هر if یک endif هم دارد دیگر!

endif رو کجا قرار بدیم؟!
قطعا باید بریم پایین سایدبار و قبل از تموم شدن یعنی <div/> و همچنین <ul> (طبق قانونمون) کد زیر رو بنویسیم:

<?php endif; ?>

همین!

فایل رو ذخیره کنید و نگاهی به سایت بندازین!

اگه تغییری نمیبینین و همون سایبار قبلی رو دارین به پیشخوان برین و بعد در قسمت نمایش روی ابزارک ها یا widgets کلیک کنید.

http://localhost/wordpress/wp-admin/widgets.php

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

خسته که نیستین

حداقل خوشحال باشین

بابای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۶الف(سایدبار)

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

امروز میریم سراغ یکی دیگر از قسمتهای مهم هر سایت، یعنی سایدبار یا ستون کناری که میتونیم بسیاری از کاربردها و ابزارک ها رو در این قسمت قزار بدیم.

میدونیم که وردپرس قسمتی داره به نام ابزارک ها یا 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()

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

و دلیل اینکه ۲ تگ رو با ۴ شماره گذاری کردم اینه که هر دو در یک مرتبه قرار دارن یعنی در کنار هم هستن نه داخل هم! تصویر گویای همه چیز هست…

نه خسته!!

بابای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۵ث(هدایتگر صفحه)

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

تمام مواد لازم رو باز میکنیم و میریم به 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’); ?>

حله؟!

البته من اینکار رو برای واضحتر کردن این قضیه کردم و نیازی نیست انقدر بیریختش کنید:d

امروز قسمت Content هم تموم شد یعنی ما تا امروز Header و Content سایت رو ساختیم و باز هم یعنی که نصف راهو رفتیم!

میمونه Sidebar یا کناره ی سایت و Footer که پایین سایتمون رو در بر میگیره!

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

درس سبکی بود نه؟

اشکال نداره! سنگینم میشه!

بابای فعلا…

دسته‌ها
وردپرس

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

سلام

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

اگه یک نگاه کلی به کل کارهایی که انجام دادیم بندازیم میفهمیم که یک 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 که عکس اون عمل میکنه ادامه یافت!:

توضیح:قرمز ها تابع، و همرنگ ها مربوط به همند.

حالا در مورد پست ها!

وقتی نگاهی به source سایتمون بکنیم میفهمیم که تمام پستها با یک کلاس (post) شناخته شده اند!

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

برای اینکه به پست هامون یک آی دی مناسب بدیم به صورت زیردر کنار کلاس post :

id=”post-<?php the_ID(); ?>”

یک خط کد مینویسیم، تابع the_ID تابعی است که کارش اینه که به هر مطلب یک شماره ی منحصر به خودش رو میده

حالا بعد از ذخیره کار میریم و با گوگل کروم که گفتم دانلود کنید و یا با فایرفاکس و افزونه مورد نظر ما (که اسمش رو یادم نبود و الان هست!) یعنی افزونه ی Firebug سایت رو باز میکنیم:

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

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

عکس زیر رو باز کنید (به علت حجم نسبتا زیاد باید روی عکس کلیک کنید و ذغالی ها هم صبور باشید لطفن!!)

در فایر فاکس هم Firebug دقیقن (شایدم تقریبن) همین کار رو انجام میده که میتونین ازش استفاده کنید.

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

تصویر کدهای نوشته شده تا امروز

این هم از این!

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

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

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

حالا اگه ما تعداد مطالبمون زیادتر باشه چی؟

حتما به دکمه ای نیاز داریم که مارو به صفحات دیگه ببره یعنی مثلا صفحاتی که هر کدوم ۵ پست دارن!

در درس بعدی یاد میگیریم دو کلید “بعدی” و “قبلی” در انتهای وبلاگ قرار بدیم.

فعلن بابای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۵پ(ابزارهای متن)

سلام

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

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

post-meta-data (2698 دانلود ها)

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

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

به همه ی اینها معمولا 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 همون دو نقطه ی خودمونه! ( : ) اما اگه ما : بزاریم و از وردپرس فارسی هم استفاده کنیم کلمه به فارسی ترجمه میشه و شکل کار رو خراب میکنه هرچند این قسمت هم دل بخواه است!

&#58;

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

حالا مشکل ۲ خطمون در 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

کاراکتر های مخفی در فرمت png (969 دانلود ها)

کاراکتر های مخفی فرمت pdf (1053 دانلود ها)

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

سو…

همین دیگه

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

بابای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۵ب(متن مطالب)

سلام

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

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

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

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

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

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

در درس شماره ۳ یک قالب جدید با نام 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 ) که کاری که من میخوام توضیح بدم رو انجام میداد اما من کروم رو برای اینکار پیشنهاد میکنم!

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

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

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

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۵(حلقه)

wp-design

سلام

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

wamp،مرورگر وب و فولدر آموزش ما مثل همیشه باز هستن تا درس شماره ۵ رو شروع کنیم!

نفس عمیق!

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

یک تگ نامرئی(div) زیر هدر میسازیم و id اون رو content می نهیم!!! که معنای محتوا رو میده!

در مجموع جلسه قبل و امروز داریم:

<body>
<div id=”header”>
<h1><a href=”<?PHP bloginfo(‘url’);?>”><?PHP bloginfo(‘name’);?></a></h1>
<h2><?PHP bloginfo(‘description’);?></h2>
</div>

<div id=”content”>

</div>
</body>

همه چیز فکر میکنم واضح بوده و هست فقط یه نکته در مورد کد نویسی و اون اینکه این فاصله هایی که من میدم و شما هم انشاالله میدهید برای چک کردن و دوباره خواندن کد در آینده به ما کمک زیادی میکنه تا گیج نشیم! توجه داشته باشین که به جای استفاده از کلید 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

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

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

و میبینیم که عنوان پست های ما پشت سر هم و بیریخت و… در کنار هم توسط 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>

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

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

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

موفق باشین

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

بابای…

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۴(هدر۲)

wp-design

سلام

اگر سری آموزش های طراحی قالب وردپرس را از اول دنبال نکرده اید به آدرس زیر بروید.

لیست آموزشهای قالب وردپرس

مثل همیشه میریم به فولدر 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>

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

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

بای

دسته‌ها
وردپرس

آموزش طراحی قالب وردپرس #۴(هدر۱)

سلام

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

صفحه ی لیست آموزشهای طراحی وردپرس

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

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

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

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

http://localhost/wordpress/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دیدین؟!!

ما در واقع الان با تابع 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 انتخاب کردیم که آدرس سایت رو برمی گرداند!!

به همین راحتی

به همین …

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

موفق باشید

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