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

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

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

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

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

امروز یک فرم جستجو میسازیم و یک تقویم در سایدبار قرار میدیم تا در درس بعد بتونیم کار سایدبار رو تموم کنیم.

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

اما چون اینجا هدفمون بیشتر آموزش طراحی وردپرس هست و کارهایی که باید بعدن بازهم انجام بشه،(که البته ساخت فرم جستجو جزو این دسته نیست!) برای همین نیازی به توضیح زیادی نیست.

(البته میتونین کد رو بررسی کنین و اگه سوالی بود در خدمتم!)

فرم جستجویی که در اختیارتون قرار میدم رو دانلود کرده و بعد با باز کردن و انتخاب save as  اون رو با نام searchform.php در فولدر اصلی تم amoozesh ذخیره کنید.

searchform.txt (1754 دانلود ها)

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

<li  id=”search”>

<?php include     (TEMPLATEPATH . ‘ /searchform.php  ‘)  ;   ?>

</li>

من در زیر تگ <ul> که در زیر <div > سایدبارقرار داره این کد رو نوشتم.

توضیح اینکه include یک تابع php است که کارش از اسمش معلومه، include یعنی شامل شدن و در برداشتن یعنی اینجا این تابع فایل داخل پرانتز روبروی خودش رو کپی میکنه و میاره جایی که نوشتیم، یعنی ما میتونستیم همه ی محتویات رو همینجا کپی کنیم و include نکنیم اما اینکار ابلهانه است به نظرم!

TEMPLATEPATH هم path یا همون “مسیر” template یا همون “قالب” رو مینویسه، یعنی آدرس فولدر theme مارو پیدا میکنه و فقط میمونه که به فایل searchform.php بریم.

در واقع الان ما فایلی در آدرس زیر رو include کردیم:

http://localhost/wordpress/wp-content/themes/amoozesh/searchform.php

که مثلن اگه من تم سایت خودم (tenet.ir) رو amoozesh قرار بدم آأرس اتوماتیک به آأرس زیر تغییر میکنه:

https://tenet.ir/wp-content/themes/amoozesh/searchform.php

اکی؟

حالا میمونه اون دات یا dot یا . که بعد از TEMPLATEPATH نوشتیم، اون نقطه کارش اینه که آدرس هارو به هم میچسبونه، این نکته هم بد نیست بدونین که .  در موارد بسیاری در php شبیه این کار رو انجام میده.

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

برای تغییر اندازه فرم میتونیم در فایل searchform.php سایز (size) رو تغییر بدیم و برای جایگزین کردن کلمه ای به جای find قسمت value رو تغییر بدیم.

اکی؟

پس تا حالا داریم:

توضیح خاصی هم فکر نمیکنم دیگه لازم باشه id هم دادیم چون منحصر به فرده واسمش هم search قرار دادیم که فکر نمیکنم اسم دیگه ای بهتر از این باشه!

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

<li  id=” calendar ” >   <h2>    <?php   _e (’Calendar’)  ; ?  >   </ h2 >

<? php    get_calendar() ;  ? >

< / li >

با تابع e_ یک calender نوشتیم و بین تگ h2 گذاشتیم تا مثل بقیه عناوین بشه و بعد هم با تابع get_calender تقویم رو فراخوانی کردیم!

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

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

در درس بعدی کاری میکنیم که سایدبارمون widgetize بشه و با ابزاک ها سازگار!

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

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

بای بای بای

9 دیدگاه دربارهٔ «آموزش طراحی قالب وردپرس #۶ت(فرم جستجو و تقویم)»

douste aziz
man darshaye shomara ghadam be ghadam va ba deghat donbal mikonam ma vaghean mamnon hastam az talashi ke anjam dadi

Man ehsas mikonam ke shoma coad calendar ra eshtebah type kardid

thanks

سلام ممنون از آموزش جالبتون
من کد search که دادین گذاشتم و همه کارهایی که شما انجام دادین دادم ولی از همون خط ایراد می گیره
یه سوال دیگه چطوری میشه با expression web این کدهای php رو نوشت چون تو notepad سخته؟

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

اولا تشکر از آموزش خوبتون!
ثانیاً شما ۲ بار از یک id به نام search استفاده کردید:
یکبار داخل فایل searchform.php
و یکبار هم برای تگ li داخل فایل index.php
لطفا بررسی بفرمائید

آقا من آموزش های بعدی را که خوندم متوجه شدم که عمداً این خطا اتفاق افتاده برای داشتن مثالی از خطایابی سایت اعتبار سنجی w3… ببخشید…. شرمندم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *