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

آموزش شخصی سازی بخش جستجوی قالب وردپرس

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

ویرایش فایل search.php برای ویرایش بخش صفحه نمایش جستجو قالب وردپرس

در وردپرس زمانی که ما فایل search,php را نداشته باشیم ، جستجو های ما طبق index.php نمایش داده می شوند . میتوانید با جستجو در سایت نتیجه را مشاهده بکنید .

می بینید که نتایج درست اند ولی ما ظاهر متفاوتی میخواهیم ، برای این کار باید فایل search.php را بسازیم .

ساخت فایل search.php

فایل search.php بسیار به فایل index.php شبیه می باشد پس فایل index.php را کپی می کنیم و به search.php پیست میکنیم .

ما می خواهیم ۲ تغییر در search.php ایجاد کنیم .

اولین تغییر ایجاد یک پنل برای سرچ مانند تصویر زیر می باشد .

wptm-11-1

دومین تغییر این است که اگر مطلبی ثبت نشده بود ، یک پیغام جدید به کاربر بدهیم .

توجه کنید که من مدنظرم هست که بخش مطالب ویژه را برای سردرگم نشدن کاربر ، نمایش ندهم .

خوب حالا یک فایل برای این پنل میسازیم و آن را جایگزین بخش مطالب ویژه میکنیم .

برای این کار ابتدا یک فایل به نام extras-search.php بسازید و در search.php به جای featured در get_template_part ، رشته ی search را وارد کنید .

خوب حالا باید فایل extras-search.php را بسازیم .

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

برای بدست آوردن رشته ی جستجو شده از $_GET استفاده می کنیم . همانطور که در uri مشاهده میکنید ، کلید این رشته s میباشد . یعنی عبارت جستجو شده $_GET[‘s’] میباشد .

ما برای جلوگیری از باگ XSS رشته ی جستجو شده را از فیلتر htmlspecialchars عبور میدهیم .

خوب حالا کد HTML زیر را در extras-search.php قرار دهید :

حالا باید به کد های HTML استایل بدهیم .

ابتدا ظاهر کلی را می سازیم و یک پس زمینه ثبت می کنیم .

ما برای نمایش دادن دکمه و فیلد برای راحتی از flex استفاده می کنیم . میتوانستید از float هم استفاده کنید ولی خواستم یکم تمرین حرفه ایی شدن بکنیم 🙂

حالا به فیلد مان استایل میدهیم . قرار است وقتی در حال نوشتن در فیلد بودیم ، یک border در زیر آن قرار بگیرد و فیلد روشن تر شود :

ایجاد افکت مد نظرمان :

 

حالا به دکمه استایل میدهیم :

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

نمایش پیغام هنگام نتیجه ندادن جستجو در پوسته وردپرس

خوب حالا می خواهیم وقتی جستجو نتیجه نداشت ، یک پیغام اختصاصی نمایش دهیم .

برای این کار فایل loop-main.php را کپی کنید و با نام loop-search.php ذخیره کنید .

در فایل search.php به جای main در get_template_part ، رشته ی search را وارد کنید :

خوب جالا فایل loop-search.php را باز کنید و کد زیر را به جای echo “مطالبی ثبت نشده است”; در خط ۵۴ قرار دهید :

یعنی کد :

تبدیل به کد زیر شود :

 

همانطور که میبینید صفحه ی جستجو ی ما ، ظاهر متفاوتی گرفت و کمی برای کاربر ها آرامش بخش تر شد !

 

دانلود سورس :

دانلود “سورس قسمت 11 ام آموزش ساخت پوسته وردپرس فارسی” j11.zip – Downloaded 167 times – 74 KB

 

اگر سوالی داشتید در نظرات مطرح کنید .

 

 

 

 

 

 

بر چسب های پست : , , , , , ,
مطالب مرتبط
سلام دوستان امیدوارم حالتان خوب باشد . شکر خدا دوره ی مقدماتی ساخت پوسته وردپرس ...
۰۲ بهمن ۹۴
10 دیدگاه
سلام دوستان . با قسمت آخر از دوره ی آموزشی ساخت پوسته وردپرسی مقدماتی با شما هست ...
۰۲ بهمن ۹۴
0 دیدگاه
سلام دوستان امیدوارم حالتان خوب باشد . در این قسمت از دوره ی آموزش ساخت پوسته ی ...
۰۱ بهمن ۹۴
0 دیدگاه
سلام دوستان امیدوارم حالتان خوب باشد . در این قسمات از آموزش طراحی پوسته وردپرس ...
۱۹ دی ۹۴
0 دیدگاه
5 دیدگاه برای “آموزش شخصی سازی بخش جستجوی قالب وردپرس”
  1. mammad59 گفت:

    سلام
    ممنون از مطالب مفیدی که ارائه کردید
    من میخوام تغییراتی روی فایل جستجوی یک قالب انجام بدم که کدش برای من پیچیده اس شما میتونید کمک کنید؟

    1. توی تلگرام با بنده @pp2007ws تماس بگیرید.

      1. mammad59 گفت:

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

  2. Harrison گفت:

    با سلام و خسته نباشید .
    ممنون از آموزش خوبتون .
    فقط من یه مشکلی دارم اینکه نمیتونم فایل ها رو دانلود کنم یعنی از فرمی که در ساید بار هست که اصلا لوگین نمیشه. از صفحه no-access هم که ورود به حساب کاربری رو میزنم لوگین میشه ولی وقتی برمیگردم به صفحه دانلود انگار نه انگار .

پاسخ دهید

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

ورود به حساب کاربری
بستن این پنجره