روش استفاده از تابع wp_get_attachment_image در وردپرس + مثال های مفید

این wp_get_attachment_image یک تابع وردپرس است که به شما امکان می دهد پیوست های تصویر را به راحتی بازیابی و نمایش دهید روی شناسنامه آنها

چه در حال ساخت یک تم سفارشی یا یک افزونه باشید، این عملکرد روشی انعطاف‌پذیر برای نمایش تصاویر با اندازه‌ها و ویژگی‌های سفارشی ارائه می‌کند.

در این آموزش، به بررسی این موارد خواهیم پرداخت wp_get_attachment_image() تابع و توضیح پارامترهای آن. ما همچنین چند مورد استفاده پرطرفدار را ارائه خواهیم کرد که می توانید آنها را آزمایش کنید روی وب سایت وردپرس میزبان شما

پارامترهای تابع wp_get_attachment_image

این wp_get_attachment_image() تابع به کاربران اجازه می دهد تا یک HTML را بازیابی کنند img عنصر برای پیوست تصویر

wp_get_attachment_image( int $attachment_id, string|int[] $size="medium", bool $icon = false, string|array $attr="" );

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

علاوه بر این، می توانید پارامترهای مختلف دیگری را برای سفارشی کردن خروجی تصویر اضافه کنید، مانند اندازه تصویر، کلاس CSS یا متن جایگزین:

$attachment_id

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

اندازه دلار

یک پارامتر اختیاری که اندازه تصویر وردپرس را برای نمایش مشخص می کند. شما می توانید هر نام اندازه تصویر ثبت شده را مشخص کنید، به عنوان مثال، بند انگشتی، متوسط، بزرگ، یا اندازه دلخواه بر حسب پیکسل.

نماد $

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

$attr

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

• کلاس – کلاس CSS تگ تصویر را کنترل می کند. می توانید با ایجاد یک لیست جدا شده از فاصله، چندین کلاس اضافه کنید.
• alt – متن جایگزین تصویر را تنظیم می کند. مقدار ویژگی alt برای اهداف دسترسی و سئو وردپرس مهم است.
• srcset – چندین منبع تصویر با وضوح، اندازه یا نسبت ابعاد مختلف را مشخص می کند. مرورگر به طور خودکار بهترین منبع را انتخاب می کند روی وضوح صفحه نمایش دستگاه
• اندازه ها – با هم کار می کند srcset صفت. اندازه تصویر نمایش داده شده را مشخص می کند روی آ page مستقر روی فضای موجود
• بارگذاری – روش بارگیری تصویر را تعیین می کند. به عنوان مثال، مقدار پیش فرض است تنبل برای بارگذاری تنبل
• رمزگشایی – به شما امکان می دهد تعیین کنید مرورگر چگونه تصویر را تفسیر کند. مقادیر معتبر هستند ناهمگام برای رمزگشایی تصویر به صورت ناهمزمان، همگام سازی برای رمزگشایی تصویر به صورت همزمان، یا خودکار.

روش استفاده از wp_get_attachment_image

در این بخش روش استفاده از آن را توضیح خواهیم داد wp_get_attachment_image() عملکرد موثر برای اطلاعات بیشتر کد زیر را بررسی کنید:

<?php
if ( has_post_thumbnail() ) { // check if the post has a featured image
    $thumbnail_id = get_post_thumbnail_id(); // get the ID of the post thumbnail image
    $image = wp_get_attachment_image( $thumbnail_id, 'large' ); // get the HTML code for the post default thumbnail image
    echo $image; // display the image
}
?>

در اینجا کاری است که ما انجام دادیم:

1. استفاده کرد has_post_thumbnail() عملکردی برای بررسی اینکه آیا پست دارای یک تصویر برجسته است یا خیر.
2. کاربردی get_post_thumbnail_id() برای دریافت شناسه تصویر برجسته.
3. استفاده کرد wp_get_attachment_image() تابع دریافت کد HTML برای تصویر.
4. گذشت $thumbnail_id متغیر به عنوان شناسه تصویر و بزرگ به اندازه ی مشخص شده
5. به کار گرفته شده اکو برای خروجی کد HTML تصویر به page.

به یاد داشته باشید که می توانید آن را جایگزین کنید بزرگ پارامتر با هر اندازه تصویر ثبت شده.

نمونه هایی از عملکرد wp_get_attachment_image وردپرس

چند مورد استفاده محبوب را بررسی کنید wp_get_attachment_image() برای درک اینکه چگونه می تواند به شما در پروژه های وردپرس شما کمک کند.

خروجی یک تصویر آماده برای استفاده HTML

ساده ترین راه برای تست wp_get_attachment_image() تابع ارسال شناسه پیوست تصویر به آن است.

<?php echo wp_get_attachment_image( 37);?>

به یاد داشته باشید که ما هیچ اندازه تصویر خاصی را در این مثال ارائه نکردیم. از این رو، تابع تصویر در اندازه کامل را با شناسه پیوست 37 بازیابی کرد.

در HTML، خروجی به این صورت خواهد بود. متن جایگزین اگر قبلاً اضافه شده باشد وجود خواهد داشت:

<img width="500" height="500" src="http://example.com/wp-content/uploads/1403/03/image.jpg" class="attachment-full size-full" alt="Alt Attribute">

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

استفاده از اندازه سفارشی

تصاویر با اندازه سفارشی می توانند با کاهش عملکرد وب سایت را بهبود بخشند page زمان بارگذاری و بهبود ظاهر کلی. آنها همچنین ثبات را در دستگاه ها و صفحه های مختلف تضمین می کنند:

<?php echo wp_get_attachment_image( 37, [ 100,100 ], true); ?>

در HTML، خروجی به صورت زیر خواهد بود:

<img width="40" height="40" src="http://example.com/wp-content/uploads/1403/03/image.jpg" class="attachment-thumbnail size-thumbnail" alt="Description for the alt text">

در این مورد، پارامتر دوم از wp_get_attachment_image() تابع آرایه ای است که شامل عرض و ارتفاع بر حسب پیکسل اندازه تصویر درخواستی است. پارامتر سوم روی تنظیم شده است درست است، واقعی، به این معنی که تابع تصویر را به ابعاد دقیق مشخص شده در آرایه برش می دهد.

در اینجا چگونه به نظر می رسد روی یک وب سایت زنده:

نمایش همه تصاویر مرتبط با پست

شما می توانید تمام تصاویر مرتبط با یک شناسه پست خاص را نمایش دهید. انجام این کار به شما امکان می دهد تا بدون پیمایش در کل پست، تمام تصاویر مربوطه را مشاهده کنید.

<?php
$attachments = get_attached_media('image', get_the_ID());
if (!empty($attachments)) {
    foreach ($attachments as $image) {
        echo wp_get_attachment_image($image->ID, 'full');
    }
} 
?>

در این مثال، کد تمام تصاویر پیوست شده پست فعلی را با استفاده از بازیابی می کند get_attached_media() تابع و با استفاده از یک حلقه foreach از میان آنها حلقه می زند.

برای هر تصویر، آن را فراخوانی می کند wp_get_attachment_image() عملکرد بازیابی نسخه کامل تصویر با شناسه پیوست.

مشخص کردن ویژگی‌های کلاس، Alt و عنوان یک تصویر

همچنین می توان کلاس سفارشی، متن جایگزین و ویژگی های عنوان را برای یک تصویر مشخص کرد. تنها کاری که باید انجام دهید این است که آنها را روی یک متغیر تنظیم کنید. در مورد ما، آن است $ سفارشی:

<?php
$custom = [ 'class' => 'my-class', 'alt' => 'alt text', 'title' => 'my title' ];
echo wp_get_attachment_image( 37, 'medium', false, $custom );
?>

در این مثال، پارامتر چهارم آرایه‌ای است که دارای ویژگی‌های اضافی برای the است برچسب زدن

نتیجه

wp_get_attachment_image() یک تابع همه کاره وردپرس است که به شما امکان می دهد تصاویر پیوست شده به پست ها یا صفحات را به راحتی نمایش دهید.

در این آموزش به این موارد پرداخته ایم wp_get_attachment_image() تابع و پارامترهای آن ما همچنین موارد استفاده ای را ارائه کرده ایم که می توانید آنها را آزمایش کنید روی وب سایت وردپرس شما

امیدواریم این آموزش برای شما مفید بوده باشد. در صورت داشتن هر گونه سوال در زیر کامنت بگذارید.