نمایش و مخفی کردن متن در پست وردپرس با WP ShowHide

اگه می‌خواید بخشی از نوشته همون اول دیده نشه و کاربر با زدن یک دکمه اون رو باز کنه، افزونه WP ShowHide این کار رو بدون نیاز به کدنویسی انجام می‌ده. نسخه‌های جدید افزونه در کنار کد کوتاه، بلوک Show/Hide رو هم به ویرایشگر وردپرس اضافه کردن؛ پس خیلی راحت‌تر می‌تونید متن‌های بازشونده بسازید.

توی این آموزش، اول پیش‌نیازهای افزونه رو با هم بررسی می‌کنیم. بعد یاد می‌گیریم چطور با بلوک Show/Hide متن بازشونده بسازیم و در آخر هم سراغ کد کوتاه می‌ریم. با این قابلیت می‌تونید توضیح‌های طولانی، جواب پرسش‌ها یا جزئیات بیشتر رو جمع کنید تا صفحه خلوت‌تر و مرتب‌تر دیده بشه.

ساخت متن بازشونده در وردپرس

متن بازشونده بخشی از محتواست که اول مخفی می‌مونه و با کلیک روی دکمه‌ای مثل «مشاهده متن» نمایش داده می‌شه. به این رفتار Toggle هم می‌گن؛ یعنی کاربر با یک دکمه محتوا رو باز می‌کنه و با کلیک دوباره، اون رو می‌بنده.

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

معرفی افزونه WP ShowHide

افزونه WP ShowHide یک افزونه رایگانه که بخش‌های دلخواه محتوا رو نمایش می‌ده یا مخفی می‌کنه. این افزونه صفحه تنظیمات جداگانه‌ای نداره و برای کار با اون می‌تونید از بلوک اختصاصی یا کد کوتاه کمک بگیرید. کد کوتاه یا Shortcode هم یک عبارت کوتاه داخل کروشه‌ست که وردپرس اون رو به یک قابلیت آماده تبدیل می‌کنه.

تعداد نصب فعال افزونه‌ها با گذشت زمان عوض می‌شه؛ پس بهتره یک عدد ثابت رو معیار انتخابتون نذارید. قبل از نصب، صفحه رسمی افزونه رو باز کنید و سازگاری، زمان آخرین به‌روزرسانی و نسخه موردنیاز وردپرس و PHP رو همون‌جا ببینید.

پیش‌نیازهای WP ShowHide نسخه 3.0.0

نسخه 3.0.0 افزونه به وردپرس 6.8 یا جدیدتر و PHP 8.2 یا جدیدتر نیاز داره. PHP زبان برنامه‌نویسی‌ایه که وردپرس با کمک اون روی سرور اجرا می‌شه. اگه نسخه‌های سایتتون قدیمی‌تر باشن، ممکنه نتونید افزونه رو نصب یا فعال کنید.

برای دیدن نسخه وردپرس، به بخش «پیشخوان ← به‌روزرسانی‌ها» برید. نسخه PHP رو هم می‌تونید از مسیر «ابزارها ← سلامت سایت ← اطلاعات ← سرور» بررسی کنید. اگه PHP سایتتون قدیمیه، قبل از تغییرش از سایت نسخه پشتیبان بگیرید و مطمئن بشید قالب و افزونه‌های دیگه با نسخه جدید سازگارن.

نصب افزونه WP ShowHide

وارد پیشخوان وردپرس بشید و از مسیر «افزونه‌ها ← افزودن افزونه تازه»، عبارت WP ShowHide رو جست‌وجو کنید. افزونه رو نصب کنید و بعد دکمه فعال‌سازی رو بزنید. اگه اولین باره که افزونه نصب می‌کنید، راهنمای نصب افزونه در وردپرس همه مراحل رو با جزئیات بیشتری توضیح می‌ده.

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

ساخت متن بازشونده با بلوک Show/Hide

در نسخه 3.0.0، راحت‌ترین روش استفاده از بلوک Show/Hide هست. نوشته یا برگه دلخواهتون رو ویرایش کنید، روی دکمه «+» بزنید و Show/Hide رو توی بخش جست‌وجوی بلوک‌ها بنویسید. بعد بلوک افزونه رو به محتوا اضافه کنید.

محتوایی رو که قراره باز و بسته بشه داخل همین بلوک بذارید. بعد بلوک رو انتخاب کنید و نگاهی هم به تنظیمات نوار کناری ویرایشگر بندازید. اونجا می‌تونید متن دکمه‌های نمایش و مخفی‌کردن رو متناسب با محتوای صفحه بنویسید. مثلاً عبارت‌های «مشاهده توضیحات بیشتر» و «بستن توضیحات» انتخاب‌های روشنی هستن. اگه می‌خواید با دکمه‌های معمولی و تنظیماتشون هم آشنا بشید، راهنمای ساخت دکمه در وردپرس به کارتون میاد.

در آخر، پیش‌نمایش نوشته رو باز کنید و دکمه رو هم در موبایل و هم در کامپیوتر امتحان کنید. نسخه جدید افزونه برای کنترل این بخش از دکمه و ویژگی‌های دسترس‌پذیری مثل aria-expanded و aria-controls کمک می‌گیره. این ویژگی‌ها به ابزارهای کمکی می‌گن که محتوا بازه یا بسته.

استفاده از کد کوتاه WP ShowHide

اگه بلوک افزونه رو پیدا نمی‌کنید یا ترجیح می‌دید با کد کوتاه کار کنید، یک بلوک «کد کوتاه» به نوشته اضافه کنید و نمونه زیر رو داخلش بذارید:

[showhide type="post"]متنی که می‌خواید مخفی بشه[/showhide]

افزونه همون متنی رو مخفی می‌کنه که بین تگ شروع و پایان قرار گرفته. یادتون نره تگ پایانی باید دقیقاً [/showhide] باشه؛ اگه اسمش رو اشتباه بنویسید، کد کوتاه درست اجرا نمی‌شه.

تغییر متن دکمه نمایش و مخفی‌کردن

برای اینکه متن پیش‌فرض دکمه با محتوای فارسی سایتتون هماهنگ باشه، می‌تونید مقدارهای more_text و less_text رو عوض کنید. نمونه درست کد به این شکله:

[showhide type="post" more_text="مشاهده متن..." less_text="مخفی‌کردن متن..."]متنی که می‌خواید مخفی بشه[/showhide]

مقدار more_text متن دکمه بازکردن و مقدار less_text متن دکمه بستن محتوا رو مشخص می‌کنه. بهتره متن هر دکمه کوتاه و روشن باشه تا کاربر قبل از کلیک بدونه قراره چه اتفاقی بیفته.

پارامترهای کد کوتاه WP ShowHide

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

[showhide type="pressrelease" more_text="Show Press Release (%s More Words)" less_text="Hide Press Release (%s Less Words)" hidden="yes"]

در این نمونه، type نوع بخش رو مشخص می‌کنه. more_text متن دکمه نمایش و less_text متن دکمه مخفی‌کردن رو تعیین می‌کنن. مقدار hidden="yes" هم به افزونه می‌گه محتوا در شروع بسته باشه. عبارت %s هم جای تعداد کلمه‌ها قرار می‌گیره.

نکته امنیتی مهم

نسخه‌های خیلی قدیمی WP ShowHide مشکل امنیتی XSS ذخیره‌شده داشتن. XSS یعنی مهاجم می‌تونه کد مخرب رو داخل سایت ذخیره کنه تا بعداً توی مرورگر کاربر اجرا بشه. این مشکل‌ها در نسخه‌های 1.05 و 1.06 برطرف شدن، ولی بهتره همیشه آخرین نسخه سازگار افزونه رو نصب کنید و اون رو به‌روز نگه دارید.

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

سوالات متداول

نتیجه‌گیری

با WP ShowHide می‌تونید بخش‌های تکمیلی محتوا رو پشت یک دکمه نمایش و مخفی‌کردن بذارید. در نسخه‌های جدید، بلوک Show/Hide انتخاب راحت‌تریه؛ ولی کد کوتاه هنوز هم برای نوشته‌های قدیمی یا شرایط خاص به کار میاد.

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

تیم تولید محتوا

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