آموزش افزودن جستجو به وردپرس استاتیک با استفاده از Lunr

اگر یک سایت وردپرس استاتیک دارید یا به راه اندازی آن فکر می‌کنید، احتمالا از محدودیت‌های پیشفرض آن آگاه هستید. یکی از بزرگ‌ترین مشکلات، عدم امکان افزودن عملکرد جستجو به سایت است. به این دلیل که جستجوی روش معمول (regular way) در یک سایت استاندارد وردپرس از طریق PHP کار می‌کند و سایت‌های استاتیک از PHP استفاده نمی‌کنند. اما با کمی خلاقیت، می‌توانید از یک کتابخانه رایگان و متن‌باز جاوا اسکریپت به نام Lunr (به همراه چند ابزار دیگر) استفاده کنید تا جستجو را به سایت استاتیک اضافه کنید.

Lunr.js چیست ؟

Lunr.js یک کتابخانه جاوا اسکریپت فشرده است که به طور خاص برای جستجوی مبتنی بر مرورگر طراحی شده است. برخلاف جستجوی سنتی وردپرس که دیتابیس را با کوئری چک می‌کند، Lunr.js همه چیز را در سمت کلاینت مدیریت می‌نماید. بدون پردازش PHP و هیچ تماس API با سرویس‌های خارجی.

بهترین بخش این است که اضافه کردن Lunr.js به سایت استاتیک هزینه هاست شما را یک سنت افزایش نمی‌دهد. سایت شما همچنان بر روی صفحات Cloudflare (یا یک سرویس مشابه) ، اجرا می‌شود.

با این گفته، من می خواهم به طور خلاصه برخی از انتظارات مناسب را تنظیم کنم. Lunr.js کارهای زیادی برای آن دارد، اما راه حل بی عیب و نقصی نیست. در اینجا چیزی است که باید انتظار داشت…

 

فراز و نشیب‌های استفاده از Lunr.js

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

• اندازه سایت
• جستجوی مبادلات کیفیت

 

ملاحظات عملکرد برای سایت‌های بزرگتر

Lunr.js برای سایت های کوچک تا متوسط ​​به خوبی کار می‌کند، اما محدودیت‌های عملی وجود دارد که باید در نظر بگیرید:

• Index size و زمان بارگذاری: برای هر ۱۰۰ نوشته، تقریبا ۱۰۰ تا ۲۰۰ کیلوبایت Index size انتظار می‌رود. این ممکن است زیاد به نظر نرسد، اما سایتی با بیش از ۱۰۰۰ نوشته ممکن است با یک index 1 مگابایت به بالا باشد که باید قبل از شروع جستجو در مرورگرهای بازدیدکنندگان بارگذاری شود. برای سایت‌های کوچک‌تر، این بارگیری تقریبا آنی است، اما سایت‌های بزرگ‌تر ممکن است تhخیر قابل‌توجهی را تجربه کنند.
• استفاده از حافظه: کل ایندکس در حافظه مرورگر لود می‌شود. برای سایت‌های بسیار بزرگ، این به طور بالقوه می تواند مرورگر بازدیدکننده را کند نماید (یعنی نه فقط برگه صفحه جستجو، بلکه همه برگه‌های آن).

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

 

کیفیت جستجو: چه چیزی به دست می‌آورید و چه چیزی را رها می کنید

در مقایسه با راه حل های جستجوی سمت سرور، Lunr.js برخی معاوضه‌ها را انجام می دهد:

مزایا:

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

معایب:

• بدون پردازش زبان طبیعی برای درک هدف کوئری
• توانایی محدود برای رسیدگی به کوئری‌های پیچیده با بسیاری از اپراتورهای جستجو. این یک ایراد بزرگ نیست زیرا اکثر مردم به هر حال از اپراتورهای جستجو استفاده نمی کنند، اما در صورتی که برای شما مهم باشد باید از آن آگاه باشید. راه حلی که به شما ارائه خواهم داد شامل دو اپراتور جستجو (با حروف عام و تطبیق دقیق) است که برای اکثر موارد استفاده کافی است.

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

 

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

اکنون که متوجه شدید Lunr.js چیست، وقت آن است که آستین ها را بالا بزنید و همه چیز را برای پیاده سازی آماده کنید.

 

ابزار مورد نیاز

برای انجام این کار، به چند نکته ضروری نیاز دارید:

1. سایت وردپرس لوکال شما (با افزونه Simply Static)
2. کتابخانه Lunr.js
3. یک ویرایشگر کد (به عنوان مثال، Sublime Text یا حتی ویرایشگرهای متن ساده که هم در مک و هم در ویندوز نصب می شوند)
4. ترمینال در مک / خط فرمان در ویندوز

Lunr.js را به محیط وردپرس لوکال خود اضافه کنید

با فرض اینکه از Local by Flywheel استفاده می‌کنید، اولین قدم این است که وارد سایت وردپرس خود شوید. مطمئن شوید که One-click admin روشن است و سپس روی دکمه WP Admin ضربه بزنید:

 

بعد، از پیشخوان وردپرس ، به نمایش > ویرایشگر بروید.

با این کار وارد ویرایشگر کامل سایت می شوید. الگوها (Patterns) را از منوی کناری انتخاب کنید.

با این وجود، شما باید بتوانید گزینه‌ای را برای Header در زیر All template parts ببینید.

به این دلیل که هر تم حداقل یک الگوی هدر دارد که در آن منوی پیمایش و سایر ویژگی‌های رایج شما ذخیره می‌شود (به عنوان مثال، لوگو سایت، عنوان سایت). بسیاری از تم ها در واقع چندین قالب سربرگ دارند، اما به طور پیشفرض به طور معمول Header نامیده می شود و هیچ کلمه دیگری وجود ندارد.

همچنین ممکن است Main Header یا Header Main را ببینید. ایده این است که به دنبال گزینه ای باشید که بیشتر به نظر می رسد که گزینه پیشفرض است. هنگامی که آن را به دست آوردید، روی سه نقطه عمودی ضربه بزنید و روی Edit کلیک کنید:

 

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

1. دورترین دکمه سمت چپ را کلیک کنید تا به بلوک والد بالایی برسید.
2. پس از آن، روی نماد + کوچک در پایین سمت راست کلیک نموده تا یک بلوک جدید اضافه کنید.
3. html تایپ کنید
4. برای افزودن بلوک روی Custom HTML کلیک کنید.

قطعه کد زیر را کپی کرده و در بلوک HTML قرار دهید:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Flunr%2Flunr.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

برای اعمال تغییرات روی ذخیره کلیک کنید.

 

یک صفحه آزمایشی جستجو ایجاد کنید

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

 

از پیشخوان وردپرس، به برگه‌ها -> افزودن برگه تازه بروید.

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

ابتدا نام برگه را انتخاب کنید. در اینجا نیازی به خلاقیت نیست. Search یا Search + Your Website’s Name احتمالا برای ۹۹٪ از وب سایت‌ها کار خواهد کرد.

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

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

 

داخل بلوک Group موارد زیر را اضافه کنید:

• بلوک عنوان با متنی مانند جستجو در سایت
• یک بلوک پاراگراف با دستورالعمل‌های مختصر (به عنوان مثال، آنچه را که به دنبالش هستید تایپ کنید. توصیفی باشد، اما مختصر)

اطمینان حاصل کنید که وقتی دو بلوک را اضافه می‌کنید، روی دکمه سمت چپ ضربه می زنید تا وقتی روی نماد + کلیک می کنید، در داخل بلوک والد گروه قرار گیرد:

اکنون برای بخش مهم – باید یک بلوک HTML برای رابط جستجو اضافه کنید. مطمئن شوید که داخل بلوک والد Group هستید و سپس:

• برای افزودن یک بلوک جدید روی نماد + کلیک کنید.
• html را جستجو کنید و بلوک Custom HTML را انتخاب کنید.
• کد زیر را در آن قرار دهید:

<div class="lunr-search-container">
<div class="lunr-search-form">
<input type="text" id="lunr-search-input" placeholder="Search for..." class="lunr-search-input">
<button id="lunr-search-button" class="lunr-search-button">Search</button>
</div>
<div id="lunr-search-results" class="lunr-search-results"></div>
</div>

در زیر این، سه بلوک HTML دیگر اضافه کنید.

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

 

<div class="search-tips">
<small>
<strong>Search tips:</strong> 
Use * for partial matches (i.e., design* finds design, designer) and " " for exact phrases (i.e., "static site").
</small>
</div>

از نظر فنی می‌توانید موارد بالا را فقط به‌عنوان یک بلوک پاراگراف معمولی اضافه کنید، اما استفاده از <div class=”search-tips”> اجازه می‌دهد تا سبک‌های جزئی را که از بلوک بعدی زیر کشیده می‌شود، اضافه کنید. اگر به جای آن از بلوک پاراگراف استفاده می کنید، همچنان باید کد CSS را اضافه کنید زیرا ظاهر کل بلوک جستجوی شما را تعیین می کند. نکات جستجو تنها بخش کوچکی از آن است.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A.lunr-search-container%20%7B%0Amax-width%3A%20600px%3B%0Amargin%3A%2040px%20auto%3B%0Apadding%3A%2020px%3B%0Abackground-color%3A%20%23f9f9f9%3B%0Aborder-radius%3A%208px%3B%0Abox-shadow%3A%200%202px%205px%20rgba(0%2C0%2C0%2C0.05)%3B%0A%7D%0A%0A.lunr-search-form%20%7B%0Adisplay%3A%20flex%3B%0Agap%3A%2010px%3B%20%2F*%20This%20creates%20space%20between%20input%20and%20button%20*%2F%0A%7D%0A%0A.lunr-search-input%20%7B%0Aflex%3A%201%3B%0Apadding%3A%2012px%2015px%3B%0Afont-size%3A%2016px%3B%0Aborder%3A%202px%20solid%20%23ddd%3B%0Aborder-radius%3A%204px%3B%0Aoutline%3A%20none%3B%0Atransition%3A%20border-color%200.2s%3B%0A%7D%0A%0A.lunr-search-input%3Afocus%20%7B%0Aborder-color%3A%20%230073aa%3B%0A%7D%0A%0A.lunr-search-button%20%7B%0Apadding%3A%2012px%2024px%3B%0Afont-size%3A%2016px%3B%0Abackground-color%3A%20%230073aa%3B%0Acolor%3A%20white%3B%0Aborder%3A%20none%3B%0Aborder-radius%3A%204px%3B%0Acursor%3A%20pointer%3B%0Atransition%3A%20background-color%200.2s%3B%0Awhite-space%3A%20nowrap%3B%0A%7D%0A%0A.lunr-search-button%3Ahover%20%7B%0Abackground-color%3A%20%23005177%3B%0A%7D%0A%0A%2F*%20Search%20tips%20styling%20*%2F%0A.search-tips%20%7B%0Amargin-top%3A%2020px%3B%0Amargin-bottom%3A%2015px%3B%0Aopacity%3A%200.8%3B%0Afont-size%3A%201.0em%3B%0A%7D%0A%0A.lunr-search-results%20%7B%0Amargin-top%3A%2030px%3B%0Amin-height%3A%2050px%3B%0A%7D%0A%0A.lunr-result-item%20%7B%0Amargin-bottom%3A%2020px%3B%0Apadding-bottom%3A%2020px%3B%0Aborder-bottom%3A%201px%20solid%20%23eee%3B%0A%7D%0A%0A.lunr-result-title%20%7B%0Afont-size%3A%2018px%3B%0Afont-weight%3A%20bold%3B%0Amargin-bottom%3A%208px%3B%0A%7D%0A%0A.lunr-result-title%20a%20%7B%0Acolor%3A%20%230073aa%3B%0Atext-decoration%3A%20none%3B%0A%7D%0A%0A.lunr-result-snippet%20%7B%0Afont-size%3A%2014px%3B%0Aline-height%3A%201.6%3B%0Acolor%3A%20%23555%3B%0A%7D%0A%0A.lunr-no-results%20%7B%0Afont-style%3A%20italic%3B%0Acolor%3A%20%23777%3B%0A%7D%0A%0A%2F*%20Highlight%20styling%20for%20search%20results%20*%2F%0A.lunr-highlight%20%7B%0Abackground-color%3A%20%23ffeb3b%3B%0Apadding%3A%200%202px%3B%0Aborder-radius%3A%202px%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

مورد سوم در واقع فقط یک placeholder است. در نهایت حاوی کد جاوا اسکریپت شما خواهد بود، اما شما فعلا placeholder را اضافه می کنید تا بتوانید آن را آزمایش کنید تا مطمئن شوید همه چیز به درستی کار می کند:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Adocument.addEventListener('DOMContentLoaded'%2C%20function()%20%7B%0A%2F%2F%20This%20is%20where%20our%20Lunr.js%20search%20implementation%20will%20go%0Aconsole.log('Search%20page%20loaded%20and%20ready%20for%20Lunr%20implementation')%3B%0A%0A%2F%2F%20Elements%0Aconst%20searchInput%20%3D%20document.getElementById('lunr-search-input')%3B%0Aconst%20searchButton%20%3D%20document.getElementById('lunr-search-button')%3B%0Aconst%20resultsContainer%20%3D%20document.getElementById('lunr-search-results')%3B%0A%0A%2F%2F%20Just%20to%20confirm%20everything%20is%20connected%20properly%0AsearchButton.addEventListener('click'%2C%20function()%20%7B%0AresultsContainer.innerHTML%20%3D%20'%3Cwp-p%3ESearch%20functionality%20coming%20soon!%20You%20searched%20for%3A%20%3Cstrong%3E'%20%2B%20%0AsearchInput.value%20%2B%20'%3C%2Fstrong%3E%3C%2Fwp-p%3E'%3B%0A%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

آزمایش مرحله بعدی است، اما قبل از انجام آن، سریع یک بررسی نقطه‌ای دیگر انجام دهید تا مطمئن شوید که همه بلوک‌ها در بلوک گروه اضافه شده‌اند. شما باید یک خط باریک ببینید که همه چیز را با تمام شش بلوک شما (به عنوان مثال، عنوان، پاراگراف، چهار HTML) در داخل آن احاطه کرده است:

تست رابط جستجو

در مرحله بعد، روی Save Draft در بالا سمت راست و سپس دکمه پیش نمایش کلیک کنید تا ببینید صفحه جستجوی شما در قسمت فرانت سایت چگونه به نظر می رسد.

سعی کنید چیزی را در کادر جستجو تایپ کنید و روی دکمه جستجو کلیک کنید. باید پیامی ببینید که می‌گوید قابلیت جستجو به‌زودی عرضه می‌شود! به دنبال آن هر چیزی که تایپ کردید

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

به تب block editor برگردید و روی Publish کلیک کنید. اکنون برای فاز دو آماده هستید.

 

 

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

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

 

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

ابتدا Local by Flywheel را باز کنید و مطمئن شوید که سایتی که روی آن کار می کنید انتخاب شده است (اگر بیش از یک سایت دارید). سپس موارد زیر را انجام دهید:

• روی Site folder واقع در زیر نام سایت خود در بالا ضربه بزنید. با این کار Finder در Mac (نشان داده شده در زیر) یا File Manager در ویندوز باز می شود و تعدادی پوشه را در آنجا خواهید دید.
• به app بروید، پس از آن public، به دنبال آن wp-content و در نهایت plugins.
• در داخل plugins، یک پوشه جدید به نام lunr-index-generator ایجاد کنید.

Sublime Text یا هر کد/ویرایشگر متنی که قبلا استفاده کرده اید را باز کنید و کد زیر را در آن قرار دهید. سپس فایل را به عنوان lunr-index-generator.php در داخل این پوشه جدید lunr-index-generator ذخیره کنید:

</pre>
<?php
/**
* Plugin Name: Lunr Index Generator
* Description: Creates a search index for Lunr.js from your WordPress content
* Version: 1.0
* Author: Lunr
*/

// Don't allow direct access to the plugin file
if (!defined('ABSPATH')) {
exit;
}

// Add admin menu item
function lunr_index_generator_menu() {
add_management_page(
'Generate Lunr Search Index',
'Lunr Search Index',
'manage_options',
'lunr-index-generator',
'lunr_index_generator_page'
);
}
add_action('admin_menu', 'lunr_index_generator_menu');

// Create the admin page
function lunr_index_generator_page() {
?>
<div class="wrap">
<h1>Generate Lunr.js Search Index</h1>
<p>Click the button below to generate a search index of your site's content for use with Lunr.js.</p>

<form method="post" action="">
<?php wp_nonce_field('lunr_generate_action', 'lunr_nonce'); ?>

<p>
<label>
<input type="checkbox" name="include_posts" value="1" checked>
Include Posts
</label>
</p>

<p>
<label>
<input type="checkbox" name="include_pages" value="1" checked>
Include Pages
</label>
</p>

<p>
<input type="submit" name="lunr_generate" class="button button-primary" value="Generate Index">
</p>
</form>

<?php
// Handle form submission
if (isset($_POST['lunr_generate']) && check_admin_referer('lunr_generate_action', 'lunr_nonce')) {
lunr_generate_index();
}
?>
</div>
<?php
}

// Function to clean content for search
function clean_content_for_search($content) {
// Remove common form field patterns
$content = preg_replace('/Name:.*?Email:.*?Message:.*?/i', '', $content);
// Clean up extra whitespace
$content = preg_replace('/\s{2,}/', ' ', $content);
return trim($content);
}

// Generate the search index
function lunr_generate_index() {
$include_posts = isset($_POST['include_posts']) ? true : false;
$include_pages = isset($_POST['include_pages']) ? true : false;

// Initialize the documents array
$documents = array();

// Get posts if selected
if ($include_posts) {
$posts = get_posts(array(
'post_type' => 'post',
'post_status' => 'publish',
'numberposts' => -1,
));

foreach ($posts as $post) {
$documents[] = array(
'id' => $post->ID,
'url' => get_permalink($post->ID),
'title' => $post->post_title,
'content' => clean_content_for_search(wp_strip_all_tags($post->post_content)),
'excerpt' => get_the_excerpt($post->ID),
'date' => get_the_date('', $post->ID)
);
}
}

// Get pages if selected
if ($include_pages) {
$pages = get_posts(array(
'post_type' => 'page',
'post_status' => 'publish',
'numberposts' => -1,
));

foreach ($pages as $page) {
// Skip the search page itself
if ($page->post_name === 'search') {
continue;
}

$documents[] = array(
'id' => $page->ID,
'url' => get_permalink($page->ID),
'title' => $page->post_title,
'content' => clean_content_for_search(wp_strip_all_tags($page->post_content)),
'excerpt' => get_the_excerpt($page->ID),
'date' => get_the_date('', $page->ID)
);
}
}

// Create the JSON file
$json_data = json_encode($documents, JSON_PRETTY_PRINT);

// Save file to the active theme directory
$theme_dir = get_stylesheet_directory();
$file_path = $theme_dir . '/lunr-search-index.json';
$file_saved = file_put_contents($file_path, $json_data);

if ($file_saved) {
echo '<div class="notice notice-success"><p>Search index generated successfully! File saved to: <code>' . $file_path . '</code></p></div>';
} else {
echo '<div class="notice notice-error"><p>Error: Could not save the search index file. Please check file permissions.</p></div>';
}

// Also output as downloadable
echo '<div class="notice notice-info"><p>You can also download the index file directly:</p>';
echo '<p><a href="#" id="download-json" class="button">Download JSON</a></p>';
echo '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Adocument.getElementById(%22download-json%22).addEventListener(%22click%22%2C%20function(e)%20%7B%0Ae.preventDefault()%3B%0Aconst%20blob%20%3D%20new%20Blob(%5B'%20.%20json_encode(%24json_data)%20.%20'%5D%2C%20%7Btype%3A%20%22application%2Fjson%22%7D)%3B%0Aconst%20link%20%3D%20document.createElement(%22a%22)%3B%0Alink.href%20%3D%20URL.createObjectURL(blob)%3B%0Alink.download%20%3D%20%22lunr-search-index.json%22%3B%0Alink.click()%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /></div>';
}
<pre>

مرحله بعدی فعال کردن آن است.

 

افزونه را فعال کنید و فایل JSON خود را تولید کنید

به سایت وردپرس خود بازگردید و افزونه را مانند هر افزونه دیگری فعال کنید: افزونه ها → افزونه های نصب شده → فعال کردن.

پس از فعال سازی، به ابزارها -> Lunr Search Index  بروید.

بررسی کنید که چه نوع محتوایی را می‌خواهید شامل شود (یعنی نوشته، برگه) و روی Generate Index کلیک کنید. افزونه به طور خودکار فایل JSON را برای شما ذخیره می کند.

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

هنگامی که آن را باز کردید، باید متنی را مشاهده کنید که با برگه‌ها ویا نوشته‌های شما مطابقت دارد.

اگر همه چیز خوب است، می توانید ادامه دهید و آن را به راه اندازی استاتیک خود اضافه کنید.

 

از پیشخوان به Simply Static → General بروید و محل فایل JSON را که کنار گذاشته اید در پنجره Additional Files and Directories قرار دهید. باید چیزی شبیه این باشد:

/Users/username/Local Sites/site-name/app/public/wp-content/themes/theme-name/lunr-search-index.json

تفاوت این است که username، site-name و theme-name باید اطلاعات واقعی شما باشد.

 

فاز سوم: رابط جستجو را پیاده سازی کنید

 

در این مرحله شما کتابخانه Lunr.js خود را بارگیری کرده و یک فهرست JSON جدید پر از محتوا دارید. اکنون بخش سرگرم کننده فرا می رسد – گردآوری همه آن ها برای ایجاد یک ویژگی جستجوی کارآمد برای بازدیدکنندگان سایت.

نقطه‌ها را به هم وصل کنید

placeholder جاوا اسکریپت را که قبلا به صفحه جستجوی خود اضافه کرده بودید به خاطر دارید؟ وقت آن است که آن را با معامله واقعی عوض کنید. به صفحه جستجوی خود برگردید و آن را ویرایش کنید:

1. به برگه‌ها > همه برگه‌ها در پیشخوان وردپرس خود بروید.
2. صفحه جستجوی خود را پیدا کنید و روی ویرایش کلیک کنید.
3. بلوک گروه خود را که حاوی بلوک های HTML است پیدا کنید.
4. بلوک HTML جاوا اسکریپت (پایین ترین بلوک صفحه) را پیدا کنید و کد placeholder را با اجرای کامل زیر جایگزین کنید – اما برای این خط fetch(‘wp-content/themes/YOUR-THEME-NAME/lunr-search-index.json’) مقدار /YOUR-THEME-NAME/ خود را جایگزین کنید. برای مثال، در فایل من، آن خط به این شکل بود: fetch(‘/wp-content/themes/neve-fse/lunr-search-index.json’). خط تکمیل شده نیز باید تا حدی مطابق با آنچه به پنجره Additional Files and Directories در افزونه Simply Static اضافه کرده اید، باشد. تنها تفاوت این است که در افزونه شما مسیر کامل را نوشته اید، در حالی که در اینجا از /wp-content/ شروع می شود.

 

قابلیت جستجوی خود را تست کنید

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

همچنین روی نتیجه کلیک کنید تا مطمئن شوید که شما را به برگه یا نوشته‌ای که نشان داده می شود می برد.

سپس اپراتورهای جستجو را امتحان کنید. همان کوئری را تایپ کنید اما یک * به انتهای آن اضافه کنید و ببینید چه چیزی پیش می آید.

دوباره تکرار کنید اما درخواست خود را در داخل گیومه قرار دهید. اگر همه چیز به نظر می رسد که کار می کند، می توانید به آخرین مرحله پیاده سازی راه پیدا کنید.

 

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

انتشار صفحه جستجو در سایت زنده شما یک لحظه هیجان انگیز است و اگر از قبل همه چیز را از دنبال کردن آموزش سایت استاتیک وردپرس من تنظیم کرده اید، نباید بیش از یک یا دو دقیقه طول بکشد. از wp-admin شما در داخل Local:

 

• به Simply Static برگردید و گزینه Diagnostics را علامت بزنید تا مطمئن شوید مشکلی وجود ندارد.
• اگر همه چیز خوب است، روی Generate ضربه بزنید:

 

پس از آن موارد زیر را انجام دهید:

در mac:

ترمینال را باز کنید و به دایرکتوری (پوشه) که قطعه پایتون شما را دارد بروید. به عنوان مثال:

cd ~/Desktop/website-tools

از داخل پوشه، اسکریپت اجرایی را اجرا کنید:

./update-website.sh

در Windows:

از File Explorer برای رفتن به پوشه ای که قطعه پایتون شما را دارد استفاده کنید. اگر مطمئن نیستید، می توانید آن را جستجو کنید – update-website.bat. با این فرض که شما فایل را با آن نام ذخیره کرده اید، همانطور که در آموزش سایت استاتیک من پیشنهاد شده است. اگر نه، می‌توانید bat را جستجو کنید، که همه فایل‌های bat را روی هارد دیسک شما نمایش می‌دهد. پس از یافتن فایل، روی آن دوبار کلیک کنید تا اجرا شود.

 

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

 

جمع‌بندی

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

به طور خاص برای جستجو، اگر سایت شما از مرز ۵۰۰ صفحه که در آن Lunr.js شروع به نشان دادن محدودیت های خود می کند، رشد کند، Fuse.js یک جایگزین عالی است. این روش متفاوت عمل می‌کند (استفاده از تطبیق فازی (fuzzy matching) در زمان جستجو به جای ایجاد یک ایندکس از قبل همانطور که در اینجا یاد گرفتید)، اما برای سایت های استاتیک با حجم عظیم محتوا بسیار کارآمدتر است.