تغییر ظاهر ویجت صوت وردپرس

فهرست مطالب

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

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

چرا باید ظاهر ویجت صوت وردپرس را تغییر دهیم؟

ظاهر پیش فرض ویجت صوت ممکن است برای برخی سایت ها جذاب نباشد و با تغییر آن می توان تجربه کاربری بهتری ایجاد کرد. این تغییر باعث افزایش ماندگاری کاربران در سایت می شود.

با استفاده از کدهای HTML و CSS سفارشی، می توانید ظاهر ویجت صوت را تغییر دهید. استفاده از قالب فرزند (Child Theme) توصیه می شود تا تغییرات با به روزرسانی قالب از بین نرود.

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

پیش از تغییرات، از سایت نسخه پشتیبان تهیه کنید و از قالب فرزند استفاده کنید تا مطمئن شوید تغییرات شما پایدار باقی می مانند.

بله، افزونه های مختلفی وجود دارند که به شما امکان می دهند ظاهر ویجت صوت را بدون نیاز به کدنویسی تغییر دهید. برخی از این افزونه ها تنظیمات پیشرفته تری برای شخصی سازی ارائه می دهند.

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

چرا باید ظاهر ویجت صوت وردپرس را تغییر دهیم؟

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

آماده سازی برای تغییر ظاهر ویجت صوت

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

بخش اول: کدهای HTML

در این بخش، ما کدهای HTML مورد نیاز برای ایجاد یک ویجت صوت سفارشی را معرفی می کنیم. این کدها باید در بخشی از محتوای شما (برگه یا نوشته) قرار بگیرند.

				
					<div class="audio-wrapper">
    <div class="audio-info">
                <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" Audio Image" class="audio-image" data-lazy-src="Your Image Url here alt"><noscript><img decoding="async" src="Your Image Url here alt" Audio Image" class="audio-image"></noscript>

        <div class="audio-description">
            <h3 class="audio-title">لیاف ناونع</h3>
            <p class="audio-artist">دنمرنه مان :دنمرنه /p>
            <p class="audio-album"><موبلآ مان :موبلآ /p>
        </div>
    </div>
    <div class="audio-player" >
         <!-- >-- گنیران ( دریگ یم رارق اجنیا رد سرپدرو یتوص هدننک  شخپ

    </div>
</div>
				
			

این کد HTML یک باکس ساده برای ویجت صوت شما ایجاد می کند. شما می توانید کد بالا را هر جایی که دوست داشتید قرار دهید. فراموش نکنید که URL فایل صوتی خود را جایگزین “YOUR_AUDIO_FILE_URL” کنید.

بخش دوم: کدهای CSS

برای تغییر ظاهر ویجت صوت، نیاز به کدهای CSS داریم. این کدها را می توانید در فایل CSS قالب خود یا در بخش “سفارشی‌سازی” وردپرس قرار دهید.

				
					/* naring */
/* سرپدرو یتوص هدننک شخپ یارب باذج لیاتسا */.mejs-container {
    max-width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    background: linear-gradient(135deg, #2c3e50, #4ca1af) !important;
    margin-top: 20px !important; /* تاحیضوت شخب زا یتوص ریلپ یالاب هلصاف */ 
    }
/* naring */
.mejs-container .mejs-controls {
    background-color: #333 !important;
    padding: 10px !important;
    border-radius: 0 0 10px 10px !important;
    transition: background-color 0.3s !important;
}
/* naring */
.mejs-container .mejs-controls:hover {
    background-color: #444 !important;
}


.mejs-controls .mejs-button button {
    color: #fff !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 20px !important;
    transition: color 0.3s !important;
}


.mejs-controls .mejs-button button:hover {
    color: #1abc9c !important;
}


.mejs-controls .mejs-time-rail, 
.mejs-controls .mejs-time-total, 
.mejs-controls .mejs-time-loaded, 
.mejs-controls .mejs-time-current, 
.mejs-controls .mejs-time-hovered, 
.mejs-controls .mejs-time-float {
    height: 10px !important;
    border-radius: 5px !important;
    transition: all 0.3s !important;
}


.mejs-controls .mejs-time-total {
    background: #444 !important;
}


.mejs-controls .mejs-time-current {
    background: #1abc9c !important;
}


.mejs-controls .mejs-time-loaded {
    background: rgba(255, 255, 255, 0.2) !important;
}


.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    height: 8px !important;
    border-radius: 5px !important;
}


.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background: #444 !important;
}


.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #1abc9c !important;
}


.mejs-controls .mejs-time, 
.mejs-controls .mejs-duration {
    color: #fff !important;
}


.mejs-controls .mejs-playpause-button button::before {
    font-family: 'Font Awesome 5 Free' !important;
    content: '\f04b'; /* Font Awesome play icon */
    font-weight: 900;
}


.mejs-controls .mejs-playpause-button.mejs-pause button::before {
    font-family: 'Font Awesome 5 Free' !important;
    content: '\f04c'; /* Font Awesome pause icon */
    font-weight: 900;
}


.mejs-controls .mejs-mute button::before {
    font-family: 'Font Awesome 5 Free' !important;
    content: '\f028'; /* Font Awesome volume-up icon */
    font-weight: 900;
}
/* naring.agency */
.mejs-controls .mejs-volume-button.mute button::before {
    font-family: 'Font Awesome 5 Free' !important;
    content: '\f6a9'; /* Font Awesome volume-mute icon */
    font-weight: 900;
}
/* naring.agency */
.mejs-controls .mejs-fullscreen-button button::before {
    font-family: 'Font Awesome 5 Free' !important;
    content: '\f0b2'; /* Font Awesome expand icon */
    font-weight: 900;
}
/* naring.agency */
.mejs-controls .mejs-fullscreen-button.exit button::before {
    font-family: 'Font Awesome 5 Free' !important;
    content: '\f066'; /* Font Awesome compress icon */
    font-weight: 900;
}
/* naring.agency */
/* ریلپ ریز تاحیضوت و سکع شیامن یارب دیدج لیاتسا*/
.audio-wrapper {
    max-width: 100% !important;
    margin: 20px 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    background: linear-gradient(135deg, #2c3e50, #4ca1af) !important;
    padding: 20px !important; /* یلخاد هلصاف شیازفا */
    text-align: center !important; /* اوتحم ندرک نیچزکرم */
	display: flex;
  flex-direction: column;
  align-items: center;
}


.audio-info {
    display: flex !important;
    /*  هب رییغت inline-block * ندرک نیچزکرم یارب/
    align-items: center !important;
/* کولب لخاد رد نتم ندرک نیچزکرم */
margin-bottom: 0px !important; 
/* یتوص ریلپ و تاحیضوت نیب هلصاف */
}


.audio-image {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    margin-bottom: 10px !important; 
    /*  تاحیضوت و ریوصت نیب هلصاف*/
}


.audio-description {
    color: #fff !important;
	margin-right:5px !important;
}


.audio-title {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
}


.audio-artist, .audio-album {
    margin: 5px 0 !important;
    font-size: 16px !important;
}


/* * یتوص هدننک‌شخپ یارب لیاتسا /
.audio-player {
    width: 100% !important;
    margin-top: 0px !important;
}

				
			

این کدهای CSS ظاهر ویجت صوت شما را تغییر می دهند و آن را به یک باکس جذاب تر تبدیل می کنند. شما می توانید این کدها را بر اساس نیاز خود تغییر دهید.

آموزش ویدیویی تغییر ظاهر ویجت صوت وردپرس

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

نکات پیشرفته برای تغییر ظاهر ویجت صوت وردپرس

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

استفاده از پلاگین AudioIgniter

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

نحوه نصب و استفاده از پلاگین AudioIgniter

  • به بخش پلاگین های وردپرس بروید و پلاگین AudioIgniter را جستجو کنید.
  • پلاگین را نصب و فعال کنید.
  • به بخش تنظیمات پلاگین بروید و تنظیمات مورد نظر خود را اعمال کنید.

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

نتیجه گیری

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

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

چه امتیازی به این مقاله میدهید؟

[average_post_rating]

بدون پاسخ

نویسنده مقاله : تغییر ظاهر ویجت صوت وردپرس

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دیجیتال مارکتینگ نارینگ

کارشناسان نارینگ الان هستند!

شماره تماس :

(داخلی 2) 71053977 – 021

پست الکترونیکی :

مشاوره تلفنی رایگان
همین الان، اطلاعات تماس خود را وارد نمایید.