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

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

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

به همین راحتی

به همین …

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

موفق باشید

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

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

آموزش طراحی قالب وردپرس-ب (نصب وردپرس)

سلام

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

منتظر پست بعدی باشین.

این پست کمی طولانی خواهد شد اما چون سریع میخواهیم بریم سر اصل مطلب این پست تمام توضیحات رو برای شروع کار رو در بر داره

نترسین کار بسیار آسونه!

خوب بدون حاشیه رفتن میریم سراغ توضیحات

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

من گفتم wampserver رو نصب کنید

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

در واقع یک فضای مجازی

نصب این برنامه مثل بقیه برنامه هاست لازم نیست کار خاصی انجام بدین فقط NEXT عنایت بفرمایین!!

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

اگر قرمز بود یعنی نه apache و نه MySQL هیچ کدام راه اندازی نشدن و باید با کلیک بر روی درجه بر روی start all services کلیک کنید تا دو فلش (play) در کنار این دو سرویس بیاد

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

خوب ، بعد از نصب wamp server میریم سراغ وردپرس عزیز

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

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

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

سلام

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

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

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

طراحی قالب هم مثل نقاشی ، خطاطی ،موسیقی و غیره یک هنره

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

او کی!

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

مواد لازم برای شروع

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

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

دانلود آخرین ورژن وردپرس

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

دانلود برنامه wampserver

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

Wampserver 2.2a 32bit (3440 دانلود ها)

همین!

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

بگذریم…

فعلا ما دیگه به چیزی نیاز نداریم

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

در پست بعدی شروع میکنیم به نصب wamp server و وردپرس با توضیح کارایی هر کدام

فعلا بای