سفارش تبلیغ [کلیک کنید]
مرتبط با: افزونه وردپرس
سلام وقت بخیر
من چجور میتونم برای صفحه ی قیمتم در وردپرس، مثل صفحه قیمت اصفهان آهن، که روی هر دکمه کلیک میکنه و در همون صفحه جدول قیمت رو نشون میده این کار رو انجام بدم البنته میدونم این سایت باوردپرس طراحی نشده ولی آیا این امکان برای سایت های وردپرسی وجود داره یا نه؟
سلام! بله، امکان ایجاد صفحه‌ای با جدول قیمت و اضافه کردن دکمه‌هایی که با کلیک بر روی هر دکمه، جدول قیمت مربوطه نمایش داده میشود، در وردپرس وجود دارد. برای انجام این کار می‌توانید از افزونه‌ها و ابزارهای مختلفی که در وردپرس قابل دسترسی است، استفاده کنید.
یکی از روش‌هایی که می‌توانید این کار را انجام دهید، به شرح زیر است:
1. **ایجاد صفحه جدید:** ابتدا یک صفحه جدید در وردپرس ایجاد کنید و به آن نام مناسبی بدهید، مثلا “قیمت اصفهان آهن”.
2. **افزودن جدول قیمت:** با استفاده از ویرایشگر متن وردپرس، جدول قیمت مورد نظر خود را در صفحه وارد کنید. می‌توانید از تگ‌های HTML برای ایجاد جدول استفاده کنید یا از افزونه‌هایی مانند “TablePress” استفاده کنید که به شما امکان ایجاد و مدیریت جداول به راحتی می‌دهند.
3. **افزودن دکمه‌ها:** برای هر دسته قیمت، می‌توانید از افزونه‌های دکمه‌سازی مانند “Button Shortcodes” یا “MaxButtons” استفاده کنید. با استفاده از این افزونه‌ها، دکمه‌هایی با متن‌ها و لینک‌های مشخص میسازید.
4. **استفاده از اسکریپت جاوااسکریپت:** برای اینکه وقتی بر روی هر دکمه کلیک میشود، جدول مربوطه نمایش داده شود، نیاز به استفاده از کدهای جاوااسکریپت دارید. می‌توانید این کدها را در قسمت “Custom JavaScript” افزونه‌های مدیریت اسکریپت‌ها در وردپرس یا در فایل functions.php قالب خود قرار دهید.
کدی مشابه به زیر می‌تواند به عنوان یک مثال برای نمایش و پنهان کردن جدول‌های قیمت با استفاده از جاوااسکریپت در صفحه شما کار کند:
“`javascript
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const buttons = document.querySelectorAll(‘.price-button’);
const tables = document.querySelectorAll(‘.price-table’);
buttons.forEach(button => {
button.addEventListener(‘click’, function() {
tables.forEach(table => {
table.style.display = ‘none’;
});
const targetTableId = button.getAttribute(‘data-table-id’);
const targetTable = document.getElementById(targetTableId);
if (targetTable) {
targetTable.style.display = ‘block’;
}
});
});
});
</script>
“`
در این مثال، `.price-button` کلاس دکمه‌ها و `.price-table` کلاس جداول قیمت هستند. همچنین با استفاده از ویژگی `data-table-id` دکمه‌ها به جداول متناظر مرتبط می‌شوند.
حتما قبل از انجام هر گونه تغییرات، پشنهاد میشود که یک نسخه پشتیبان از وب‌سایت‌تان ایجاد کنید تا در صورت نیاز به بازگشت به حالت قبلی امکان پذیر باشد. همچنین، برای اضافه کردن و تنظیم افزونه‌ها و کدهای جاوااسکریپت بهتر است با توجه به تجربه خود یا با کمک یک توسعه‌دهنده وردپرسی اقدام کنید.
