وردپرس به عنوان یکی از محبوب ترین سیستم های مدیریت محتوا، امکانات گسترده ای برای کاربران خود فراهم می کند. یکی از این امکانات، ویجت صوت است که به شما اجازه می دهد فایل های صوتی را به راحتی در سایت خود نمایش دهید.
اما شاید شما بخواهید ظاهر این ویجت صوت را تغییر دهید تا با طراحی سایت شما هماهنگ تر شود. در این مقاله، به شما نحوه تغییر ظاهر ویجت صوت وردپرس را آموزش خواهیم داد. همچنین، یک آموزش ویدیویی نیز برای شما آماده کرده ایم تا بتوانید به راحتی این تغییرات را اعمال کنید.
چرا باید ظاهر ویجت صوت وردپرس را تغییر دهیم؟
ظاهر پیش فرض ویجت صوت ممکن است برای برخی سایت ها جذاب نباشد و با تغییر آن می توان تجربه کاربری بهتری ایجاد کرد. این تغییر باعث افزایش ماندگاری کاربران در سایت می شود.
چگونه می توانم ویجت صوت وردپرس را شخصی سازی کنم؟
با استفاده از کدهای 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>
/* 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;
}
