آموزش شبکه
  • کاربر گرامی ، برای مطرح کردن سوالات و مشکلات مرتبط با ووکامرس از انجمن "پرسش و پاسخ ووکامرس" و برای مطرح کردن سایر مشکلات (وردپرس ، PHP و سایر اسکریپت ها) از انجمن "پرسش و پاسخ" اقدام کنید. برای دریافت پاسخ حداقل 48 ساعت منتظر باشید.

erfan

.::آموزش طراحی پوسته وردپرس::. [ حرفه ای ] .::

8 پست در این موضوع قرار دارد

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

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

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

پیش نیاز ها:

  • آشنایی سطحی با HTML و CSS
  • آشنایی با وردپرس
  • یک ویرایشگر ساده به انتخاب خودتون

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

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

ویرایش شده در توسط erfan

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

پوسته های وردپرس با فرمت PHP ساخته میشن د این راستا صفحات متعددی برای بخش های مختلف یک وبلاگ وردپرسی وجود داره که در زیر به توضیحات این بخش ها پرداختیم...

index.php این صفحه پوسته ی صفحه ی اصلی سایت است

header.php این کدهای بخش هدر وبسایت را در خود جای میدهد و در سایر صفحات فراخوانی میشود.

footer.php این کدهای بخش فوتر وبسایت را در خود جای میدهد و در سایر صفحات فراخوانی میشود.

single.php این صفحه ادامه مطلب پست های وردپرس میباشد.

page.php این یکی پوستهی یه برگه ها است.

404.php این صفحه خطای 404 میباشد.

sidebar.php این کد های بخش ابزارک وبسایت را در خود جای میدهد و در سایر صفحات فراخوانی میشود.

style.css کد های سی اس اس (CSS) وبسایت را در خود دارد.

search.php این یکی صفحه ی نتایج جستجو است.

searchform.php این کد های باکس جستجوی سایت را در خود جای داده و در سایر صفحات فراخوانی میشود.

functions.php این فایل محل قرار گیری کد های آماده است که جنبه ی نمایشی ندارد.

comments.php این فایل کد های بخش نظرات وردپرس را در خود دارد. و در سایر صفحات فراخوانی میشود

در پست بعدی شروع به ترجمه HTML به وردپرس خواهیم کرد...

ویرایش شده در توسط erfan

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

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

1 ، 2 ، 3 شروع!

خوب فایل های HTML رو به فرمت PHP تبدیل کنید.

سی اس اس های خود رو حتما در فایل style.css قرار بدید...

کد های قسمت هدر از تگ HTML تا پایان بخش هدر وبسایت را در فایل header.php قرار دهید و آن در تاوسط کد زیر در فایل index.php فراخوانی کنید:

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

و به همین صورت کد های بخش هدر تا پایان تگ HTML را در فایلی با نام footer.php قرار دهید و با کد زیر فراخوانی کنید:

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

حالا وقت فراخوانی style.css در فایل header.php هست. کافیه کد زیر رو در تگ head قرار بدید(البته توجه کنید که فایل style.css در فولدری جز فولدر قالب نباشه)

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

خوب همونطور که نمیدونید توضیحاتی همچون مشخصات پوسته ی وردپرسی در فایل style.css قرار میگیره. بهتره جز اولین کد ها باشه...

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

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

خوب با وارد کردن این مشخصات در فایل style.css حالا ورپرس پوسته شما رو میشناسه همینطور میتونید تصویری رو برای پوسته قرار بدید کافیه فایل تصویری ترجیعاً با فرمت png و. jpeg و با نام screenshot در پوشه اصلی وسته قرار بگیره.

حالا وارد پیشخوان پوسته ها بشید و نتیجه رو ببینید.

منتظر ادامه آموزش باشید...

aliyaghobi bwaysi behnaaa پسند شده

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

خوب حالا:

بریم سراغ قرار دادن یکسر کدهایی که لازمه قرار بگیرند!!

به طور مثال ما باید تگ head قالب رو به وردپرس بشناسونیم. و یا کد نوار مدیریت وردپرس رو اضافه کنیم:

خوب برای شناسوند تگ head به وردپرس کد زیر رو در فایل header.php در تگ head قرار بدید:

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

حالا اگر با وردپرس لاگین باشید میبینید یک فاصله در بالای صفحه به وجود اومد خوب اون برای نوار ابزار وردپرس هست که با قرار دادن کد زیر در فایل footer.php قبل از پایان تگ body ظاهر میشه:

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

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

اگر توجه کرده باشید با تبدیل ایل ها به PHP و قرار دادن اونها در فولدر themes وردپرس ، دیگه تصاویری که با تگ img تعریف شدند ود نمیشن. چرا؟ چون آدری که بهشون داده شده حالا دیگه به کار نمیاد و باید یک کد PHP بهشون اضافه کرد که بتونه آدرس وبسیات و قولدر ها رو قرار بده.

مثلاً اگر کدی اینجوریاس:

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

باید اینجوری بشه:

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

گرفتی؟

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

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

مثال:

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

.

خوب حالا کدی که عنوان وبسایت رو میسازه و باید در title قرار بگیره( تگ title در تگ head در فایل header.php قرار داره)

به این صورت:

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

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

کد <?php bloginfo('name'); ?> نام وبسایت رو در خود داره و کد <?php wp_title(); ?> عنوان صفحات پست ها و... رو تعریف میکنه

.

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

فایلی با نام sidebar.php ایجاد کنید و کد های ابزارک هایی که طراحی کردید رو درونش بریزید(با هدر و فوتر هم همین کار رو کردیم) حالا با کد زیر فراخوانیش کنید:

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

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

منتظر ادامه آموزش باشید...

behnaaa aliyaghobi bwaysi پسند شده

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

سلام دوستان.

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

حلقه مطالب کارش صرفاً قرار دادن مطالب پست شده وردپرس هست. که به ترتیب قرار بگیرند.

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

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

و با این کد هم به پایان می انجامه و شرطی قرار میگیره که اگر مطلبی وجود نداشت.چاپ کنه: "مطلبی موجود نیست":

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

پس شد اینجوری:

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

خوب حالا درون حلقه باید محتوای پست رو قرار بدیم مثلاً عنوان پست،تصویر شاخص،متن پست و...

ادامه در تاپیک بعدی...

behnaaa bwaysi aliyaghobi پسند شده

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

سلام دوستان. (پوزش بابت تاخیر)...

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

در وحله*ی اول ما باید عنوان پست رو قرار بدیم. بهتره که در یک تگ <h1> قرار بگیره:

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

ما با استفاده از کد <?php the_title(); ?> عنوان پست رو قرار دادیم و با استفاده از کد <?php the_permalink() ?> آدرس پست رو برای لینک مشخص کردیم.

تصویر شاخص:

برای قرار دادن تصویر شاخص شما باید یک فایل functions.php رو درون فولدر قالبتون ایجاد کنید، سپس کد رو درون فایل functions.php قرار بدید:

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

به کد بالا دقت کنید، ما اول به وردپرس فهموندیم که قالبمون از تصویر شاخص پشتیبانی میکنه، سپس سایز تصویر شاخص رو به اون دادیم که با چه سایزی در سرور تصویر شاخص رو زخیره کنه در بالا سایز 220*155 مشخص شده که به دلخواه میتونید تغییرش بدید.

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

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

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

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

این کد متن کامل پست رو قرار میده:

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

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

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

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

behnaaa bwaysi aliyaghobi پسند شده

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

سلام

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

کد تاریخ انتشار:

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

کد نام نویسنده:

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

موضوع مطلب:

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

دیدگاه:

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

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

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

aliyaghobi bwaysi behnaaa پسند شده

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

سلام

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

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

در پست های قبل از شما خواستیم که برای قرار دادن تصویر شاخص در پست نیاز به شناسایی این ویژگی قالب به وردپرس دارید و برای این امر از فایل functions.php و محتوای درون اون استفاده میشه... حالا برای شناسایی سایدبار به وردپرس هم باید کدی رو در functions.php قرار بدیم، کد لازم به شرح زیر است:

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

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

حالا نوبت به نمایش ساید بار در هرجا که دوست داریم میرسد. فایلی با نام sidebar.php ایجاد کنید و کد زیر رو در اون قرار بدید:

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

اگر دقت کنید واژه*ی sidebar که در کد function در مقدار id قرار گرفت در کد بالا نیز قابل مشاهده است.

خوب حالا با قرار دادن این کد در هرکجای قالبتون مثلاً در فایل index.php میتونید سایدبار رو نمایش بدید:

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

منتظر ادامه آموزش باشید.

خوش باشید.

به اشتراک گذاری این پست


لینک به پست
به اشتراک گذاری در سایت های دیگر

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری