آموزش ایجاد آیکون رسانه اجتماعی که به لبه صفحه نمایش فیکس شود

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

اضافه کردن پوزیشن جدید به قالب پروتواستار سه مرحله دارد. ابتدا باید پوزیشن جدید را در فایل templateDetails.xml درج کنید. سپس لازم است که جایی برای آن پوزیشن در کد HTML فایل index.php ایجاد کنید. سس بایستی پوزیشن جدید را در فایل استایل شیت خود سبک بندی کنید. همچنین با اضافه کردن استایل media@ می توانید آن را سبک دهی کنید به طوریکه آیکون ها در صفحه نمایشگر باریک ناپدید شده و روی محتوای سایت را نپوشاند.

اضافه کردن پوزیشن جدید به قالب پروتواستار سه مرحله دارد. ابتدا باید پوزیشن جدید را در فایل templateDetails.xml درج کنید. سپس لازم است که جایی برای آن پوزیشن در کد HTML فایل index.php ایجاد کنید. سس بایستی پوزیشن جدید را در فایل استایل شیت خود سبک بندی کنید. همچنین با اضافه کردن استایل media@ می توانید آن را سبک دهی کنید به طوریکه آیکون ها در صفحه نمایشگر باریک ناپدید شده و روی محتوای سایت را نپوشاند.

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

اضافه کردن نام پوزیشن ماژول جدید به فایل templateDetails.xml

فایل templateDetails.xml از ریشه دایرکتوری تمپلیت جوملا باز کنید. پوزیشن جدید که در اینجا sideicon نامیده می شود، را به آن اضافه کنید:

<positions>    
    <position>sideicon</position>
    <position>banner</position>
    ....
<positions>

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

ایجاد یک فضا برای نمایش آیکون ها در فایل index.php

حالا فایل index.php از دایرکتوری protostar جوملا را با یک ویرایشگر متن باز کنید. ما یک <div> برای این پوزیشن ماژول نزدیک به انتهای بخش HTML فایل اضافه می کنیم. سبک بندی این <div> باید طوری باشد که به صورت ثابت در جای خود بماند، بنابراین سبک آن می تواند در هر جایی در سند HTML صفحه درج شود.

قطعه کد زیر را در پایین تگ <footer/> در نزدیکی انتهای فایل index.php درج کنید:

<?php if ($this->countModules('sideicon')) : ?>
        <div id="sideicons">
            <jdoc:include type="modules" name="sideicon" style="none" />
        </div>
<?php endif; ?>

تعیین ظاهر و سبک آیکون های اجتماعی

قطعه استیل زیر را به فایل استایل شیت خود اضافه کنید. اگر برای قالب خود استیل شیت سفارشی ساخته اید، می توانید این کد را به آن اضافه کنید. در غیر اینصورت آن را به انتهای فایل template.css اضافه کنید.

#sideicons {width: 70px; position: fixed; top: 200px; left: 0px;}
@media (max-width: 1100px) {
    #sideicons {display: none;}
}

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

ایجاد ماژول برای نمایش آیکون ها

حالا وارد ادمین سایت خود شده و مدیر ماژول جوملا را از Extensions -> Modules باز کنید. یک ماژول Custom HTML جدید بسازید. تصویر یا آیکون شبکه های اجتماعی خود را در آن درج کرده و لینک کنید. برای پوزیشن ماژول از لیست کشویی پوزیشن sideicon را انتخاب کنید. از آنجایی که این پوزیشن به فایل templateDetails.xml اضافه شده است، بایستی در این لیست وجود داشته باشد.

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

سفارشی کردن قالب پروتواستار

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

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