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

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

سلام

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

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

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

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

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

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

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

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

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

C:\wamp\www\wordpress

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

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

خوب حالا این فایل رو دانلود کنید

index.txt (4217 دانلود ها)

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

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

خوب؟

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

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

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

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

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

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

تگ <head> هم قسمتی از صفحه است که بیشتر کار اطلاعات گرفتن و دادن به مرورگر و از سرور و این حرفارو داره یعنی به خواننده سایت کاری نداره! برعکس <body> که بدنه ی وبلاگ و جاییه که ما از سایت میبینیم!

تگ <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.TeneT.ir/
Description: This is my frist theme for a tutorial.
Version: 1.0 beta
Author: Siavash Keshmiri
Author URI: http://www.TeneT.ir/

*/

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

http://localhost/wordpress/wp-admin

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

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

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

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

http://localhost/wordpress/

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

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

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

موفق باشین

بای بای

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

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

wp-design31

سلام علیکم!!

اگه مطالب اولیه نصب وردپرس رو نخوندین روی این نوشته کلیک کنید:

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

و اگه مطلب شماره ۱ طراحی وردپرس رو نخوندین حتما از نوشته

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

شروع کنین!

خوب میریم سراغ اصل مطلب

تصویر زیر رو نگاه کنید

دیدین؟

حالا دقت کنین!

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

البته اکثرن این شکلیه و میتونه به هر صورتی باشه! که فعلا به ما ربطی نداره!

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

در sidebar هم که هر چیزی از جمله widget (ابزارک) های مختلف قرار میگیرن!

در footer هم اطلاعاتی مثل copyright ، نام طراح و …

البته اینها قانون نیستن شما میتونینهر کاری بخواهید انجام بدین مثلا جای index رو با footer عوض کنین!

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

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

header و footer معمولا در صفحات مختلف از جمله page.php ، single.php و … تغییر نمیکنند! و این index است که مثلا single.php جایگزینش میشه.

این هم از این!

تموم شد

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

بای

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

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

wp design

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

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

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

یک اینکه لطفا هر موقع گفتم این کد رو بنویسین دقیقا منظورم اینه که کد رو بنویسین!

یعنی کپی پیست نداریم! البته بعضی وقت ها مهم نیست که خواهم گفت.

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

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

<tag1>

<tag2>

<tag2/>

<tag1/>

به شکل زیر نگاه کنید که کاملا و دقیقا غلط میباشد!!!

<tag1>

<tag2>

<tag1/>

<tag2/>

این نظریه یا اطلاعیه نیست یک قانون است. یعنی ما تگ هایی رو که باز میکنیم به ترتیب میبندیم!

اگر دقت کرده باشین (اگه نکردین دقت کنین!!!) احتمالا فهمیدین که شروع کننده ی هر تگ به صورت <> است، و برای بستن هر تگ باید یک اسلش قبل از تگ مربوطه بزاریم یعنی اینجوری! : </>

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

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

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

index.php

home.php

single.php

page.php

archive.php

category.php

search.php

۴۰۴٫php

comments.php

comments-popup.php

author.php

date.php

style.css

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

فایل index.php قسمت اصلی قالب ماست که وجودش ضروری و لازمه! همینطور style.css که از اسمش معلومه نقش استایل کردن و شکل دادن به تم یا همون قالب مارو داره!

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

index.php

single.php

page.php

archive.php

search.php

۴۰۴٫php

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

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

index صفحه اصلی سایت ، single صفحه ی یک نوشته به خصوص ، page یک صفحه از سایت ، archive صفحه آرشیو هفته ای ، ماهانه و … سایت ، search صفحه ای که برای جستجوی سایت استفاده میشه و بالاخره ۴۰۴ صفحه ای برای ارور (error) سایت!

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

با ساخت همین یک صفحه (یعنی index) وردپرس اکثر کارهارو انجام میده!

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

سعی کنید مواظب خودتون باشین!

بای

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

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

سلام

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سلام

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

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

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

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

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

او کی!

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

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

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

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

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

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

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

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

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

همین!

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

بگذریم…

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

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

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

فعلا بای