افزونه افکت تصاویر وردپرس WP Photo Effects

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

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

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

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

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

[wppe_effect url="http://yourimagepath.jpg"]

به جای http://yourimagepath.jpg باید نشانی عکس بارگذاری شده روی سایت را قرار دهید. حالا به غیر از گزینهٔ تنظیماتی نشانی عکس، از دیگر گزینه‌های تنظیماتی در این کد کوتاه هم می‌توان بهره برد. به کد زیر دقت کنید:

[wppe_effect url="http://yourimagepath.jpg" radius="100%"]

این کد عکس را به همراه افکت گوشه‌های گرد با شعاع ۱۰۰ درصد را ایجاد می‌کند. برای مشاهدهٔ دیگر گزینه‌های تنظیماتی این کد کوتاه به این نشانی مراجعه کنید. که مستندات کامل نحوهٔ استفاده از افزونه WP Photo Effects است.

استفاده از Class

کلاس ها در CSS برای انتخاب یک عنصر و سپس تعیین ویژگی‌های بصری به آن عنصر کاربرد دارند. برای اینکه ما از این روش به جهت دادن افکت به عکس در وردپرس استفاده کنیم،‌ باید بدانیم که افزونهٔ WP Photo Effects از چه کلاس‌هایی استفاده می‌کند. این کلاس‌ها در همان صفحهٔ مستندات افزونه ذکر شده‌اند. مثلا برای بزرگنمایی تصویر زمانی که اشاره گر روی آن می‌رود، باید از دو کلاس zoomin و wppe-hover استفاده شود. این دو کلاس را هم از طریق ویرایش اسناد قالب می‌توانید به تمامی عکس‌های سایت یا بخشی از عکس‌های سایت اختصاص دهید، تا آنها به همراه افکت بزرگنمایی شوند. یا اینکه در زمان انتشار یک نوشته، در صفحهٔ ویرایش نوشته،‌ از طریق نوار تنظیمات سمت چپ صفحه، روی پیشرفته کلیک کنید و این دو کلاس یا هر کلاس دیگری که می‌خواهید را به آن عکس متصل نمایید.

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

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

کلاس های موجود برای گالری

حالا اگر هم خواسته باشید عکس‌ها را به صورت گالری شده به همراه افکت روی سایت نشان دهید، قادرید از کلاس‌های معرفی شده البته هم برای برچسب تصاویر (img) و هم برای برچسب div که باید کل عکس‌ها را شامل شود استفاده نمایید. به تصویر زیر و کدهای موجود در آن دقت کنید:

این بخشی از صفحهٔ مستندات افزونه است. به شما گفته که چطور می‌توانید با دو تا برچسب div که هر کدام class های خاص خود را دارند، به همراه برچسب‌های img که همان برچسب نمایش تصاویر هستند، یک گالری عکس به سایت اضافه کنیم که با بردن اشاره گر روی هر عکس، به شکل بزرگ شده نمایش داده می‌شود.

البته این افزونه سبک‌های دیگر نمایش عکس‌ها، مثل نمایش توضیحات عکس زمانی که اشاره گر روی آن برده می‌شود، را هم دارد. در صفحهٔ مستندات به آنها اشاره شده است.

همانطور که دیدید، عملکرد افزونه بسیار ساده است. به این صورت که یک سند CSS را به تمامی صفحات سایت الصاق می‌کند که ما با افزودن کلاس‌های مورد نظرمان به عناصر صفحه، که همانا در اینجا برچسب img است، به آنها افکت‌های لازم را می‌دهیم. درست است که برای کسانی که دانش کافی راجع به HTML را ندارند، استفاده از WP Photo Effects کمی سخت باشد. اما این به معنی باز گذاشتن دست کاربر افزونه، برای اعمال افکت های دلخواه در مکان‌های مختلف است. شما باید بتوانید در صفحهٔ گوتنبرگ یا همان ویرایشگر نوشتهٔ وردپرس، از ابزار کدهای HTML به نحوی استفاده کنید که یا عناصر از پیش تعریف شده، مثل بلوک تصویر را ویرایش کنید، یا یک بلوک HTML خام به سند خود اضافه کرده و آن را باب میل خود،‌ طوری که بتوانید تصاویر با افکت مورد نظرتان را بسازید، تنظیم نمایید.

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