ایجاد بخش جستجو پیشرفته در سایت (وردپرس)

[m1410 196]

با سلام و خسته نباشید خدمت دوستان

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

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

[Masih 6,279]

درود .

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

اما همیشه یک راه حل با کد هست!

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

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

 

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

<form role="search" method="get" class="devmesearchbody" action="<?php echo home_url( '/' ); ?>">
	<label>
		<input type="search" class="devmesearchinput" placeholder="کلمه کلیدی را وارد کنید..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="<?php echo esc_attr_x( 'جستجو بین مطالب', 'label' ); ?>" />
	</label>
	<?php
		$swp_cat_dropdown_args = array(
				'show_option_all'  => __( 'همه' ),
				'name'             => 'swp_category_limiter',
			);
		wp_dropdown_categories( $swp_cat_dropdown_args );
	?>
	<input type="submit" class="devmesbutton" value="بگرد" />
</form>

 

سپس این کدهای استایل رو به یک فایل CSS قالب اضافه کنید :

.devmesearchbody {
	float: right;
    padding: 5px;
    background-color: rgba(12, 12, 12, 0.31);
    border-radius: 5px;
}
.devmesearchinput {
	padding: 10px;
    font-family: Tahoma;
    width: 400px;
	height: 40px;
	border-radius: 0px 4px 4px 0px;
}
.devmesearchbody select {
	padding: 9px;
    font-family: Tahoma;
    margin: -4px;
    background-color: #03A9F4;
    color: #FFF;
    height: 40px;
}
.devmesbutton {
	padding: 9px;
    font-family: Tahoma;
    margin: 0px;
    background-color: #009688;
    color: #FFF;
    height: 40px;
    border-radius: 4px 0px 0px 4px;
}

نکته : اگر از قبل در قالبتون فونت اضافه کردید، یا می خواهید فونت رو تغییر بدید کافیه بجای Tahome در بالا، نام فونت مورد نظرتون که در قالب ایمپورت شده رو وارد کنید.

 

---

 

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

 

موفق باشید.

[m1410 196]

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

[m1410 196]

خب من کد هارو جای گذاری کردم
اما مشکل اینه که شکل فرم بهم ریخت و بکگراندم یه تیکه شد
و اینکه دسته بندی های edd رو میخوام نمایش بده راهی هست ؟ چون الان دسته های معمولی رو نمایش میده
لینک ها تنها برای اعضای سایت قابل نمایش است.

چک کنید لطفاً

[Masih 6,279]

مشکل از اندازه DIV هست که کد فرم رو داخلش قرار دادید. چون اون DIV خودش یک عرض مشخصی داره ، و فرم جستجو هم یک عرض مجزا ، به همین دلیل چنین مشکلی پیش اومده .

 

برای رفع مشکل :

1. وارد فایل style.css بشید و کلس .devmesearchinput رو در خط 351 پیدا کنید . width داخل این کلس رو از 400 پیکسل به 340 پیکسل تغییر بدید.
2. در فایل style.css و در خط 78 کلس .search-block رو اصلاح کنید به کد زیر :

.search-block {
    width: 550px;
    padding: 4px 0px 0px 0px;
    margin: 30px auto;
    border-radius: 25px;
    margin-bottom: 50px;
}

در کد بالا ، دو خاصیت از استایل حذف شده و عرض هم تغییر کرده .

 

مشکل فونت هم دارید که باید از فایل استایل فونت رو بررسی کنید. باید همون Font-Face رو استفاده کنید که در فایل استایل به قالب معرفی کردید.

 

با Inspector این تغییرات رو اعمال کردم حالت نمایش درست شد. اما مطالب بخش ها رو فکر کنم به درستی استایل ندادید که از سمت راست بیرون زده (می تونید این مشکل رو هم با خاصیت Margin حل کنید.)

 

موفق باشید.

 

 

[m1410 196]

هنوز مشکل یه تیکه شدن بک گراندم حل نشده
چکار کنم ؟ و دسته بندی هم چطور تغییر بدم که دسته هایedd برای نمایش و جستجو بیاد ؟

[Masih 6,279]

مشکلی که میگید رو اگر امکانش هست با اسکرین شات توضیح بدید تا بررسی کنم . در حال حاضر نمی دونم منظورتون چه قسمتی از سایت هست و چطوری باید باشه! چون در حال طراحی هست و نمی دونم مشکلی که در طراحی هست ، به دلیل وجود کدنویسی نامناسب هست یا هنوز طراحیش کامل نشده.

 

این کد که بهتون دادم فقط دسته بندی مطالب اصلی (وبلاگ) رو دریافت می کنه. برای داشتن اون موارد باید افزونه نصب کنید. چون با چند خط کد نمیشه اون رو ساخت. افزونه ای هم که قبلا معرفی کردم در این تاپیک برای اینکار مناسب هست اما باید یک مکان سایدبار به قالبتون اضافه کنید و ابزارک رو با استایل شخصی سازی کنید.

[m1410 196]

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

[Masih 6,279]

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

کد زیر رو بجای فرم قبلی بگذارید . طبق چیزی که نوشتم ، باید دسته بندی ها رو دریافت کنه ، اما یک جستجو بزنید با این فرم و ببینید نتایج جستجو رو به اون دسته بندی محدود میکنه یا خیر :

<form role="search" method="get" class="devmesearchbody" action="<?php echo home_url( '/' ); ?>">
	<label>
		<input type="search" class="devmesearchinput" placeholder="کلمه کلیدی را وارد کنید..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="<?php echo esc_attr_x( 'جستجو بین مطالب', 'label' ); ?>" />
	</label>
	<?php
		$edd_cats = array(
				'show_option_all'  => __( 'همه' ),
				'name'             => 'edd_cats',
				'taxonomy' => 'download_category',
				'field'    => 'slug',
				'terms'    => $downloadcat
			);
		wp_dropdown_categories( $edd_cats );
	?>
	<input type="submit" class="devmesbutton" value="بگرد" />
</form>

تست کنید نتیجه رو اعلام کنید. چیزی که توی این کد ممکنه خوب عمل نکنه استفاده از terms در بخش array هست (بدون این قسمت هم فکر نکنم کد کار کنه). افزونه های مخصوص جستجو در دسته بندی های EDD ، این بخش از کد رو گسترش دادن و داخل چند فایل مجزا برای استفاده آماده کرده اند، بعید میدونم بشه با استفاده از توابع خوده افزونه EDD چنین فرمی رو تولید کرد. به هر حال کد بالا رو آزمایش کنید که کلمه وارد شده رو فقط در دسته بندی انتخاب شده جستجو می کنه یا خیر .

 

در این کد فقط امکان لیست کردن دسته بندی های دانلود وجود داره. نمی تونین دسته بندی وبلاگ و افزونه EDD رو در کنار هم بگیرید. مگر اینکه با افزونه چنین چیزی اضافه کنید.

[m1410 196]

تشکر برای کد
خیر کار نمیکنه و حالا یا نتیجه جستجو رو با همه مطالب میاره یا کلاً همه مطالب رو میاره
چه راه دیگری هستش ؟

[m1410 196]

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

[Masih 6,279]

پس متاسفانه راه دیگه ای نیست که با کد بشه انجامش داد .

 

در لینکی هم که دادید ، مربوط به نسخه پرمیوم هست که می تونید از شورتکد و PHP استفاده کنید و فرم جستجو رو نمایش بدید. اگر نسخه پرمیوم رو پیدا کردید ، با استفاده از افزونه می تونید یک فرم جستجو ایجاد کنید و توسط یک کد مثل زیر ، فرم جستجو رو در هر جایی که خواستید نمایش بدید :

<?php do_action( 'search_filter_prep_query', 14 ); ?>

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

[m1410 196]

افزونرو پیدا کردم نسخه ویژشو
اما هر کاری میکنم دسته های edd رو نمایش نمیده
اقا سایت زیر رو چک کنید ببینید میشه ازش استفاده کرد :
لینک ها تنها برای اعضای سایت قابل نمایش است.

کد هاش به کار میاد ؟
یه جوری باید این مورد رو من اکی کنم نمیدونم چطور ولی بابد بشه دیگه ممنون میشم همراهی کنید

این دو سایت از edd استفاده میکنن و سرچ دسته بندی شده دارن میشه ازش استفاده کرد ؟

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

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

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