ابزار نمایش پهنای جاری نمایشگر در طی توسعه وب

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

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, ابزار اندازه گیری عرض صفحه نمایش, ابزار اندازه گیری پهنای صفحه نمایش, ابزار اندازه گیری پیکسل صفحه نمایش

زمانی که پنجره مرورگر را کوچک یا بزرگ می کنید، سایت خود را در وسایل دیگر مثل موبایل یا تبلت مرور می کنید، عدد نمایشگر این کادر تغییر خواهد کرد. عرض صفحه نمایش با استفاده از تابع $(window).width() جی کوئری بدست می آید. برای ایجاد این کادر بایستی اقدامات زیر انجام شود:

  • یک سند جاوا اسکریپت در ویرایشگر متن ایجاد کرده و سپس به پوشه js در دایرکتوری تمپلیت جوملا آپلود کنید
  • مقداری استیل به فایل استایل شیت سفارشی خود یا استیل شیت قالب جوملا اضافه کنید
  • فایل index.php قالب وبسایت خود را در ویرایشگر متنی ویرایش کنید

زمانی که کارتان با طراحی و ایجاد وبسایت تمام شد، می توانید به سادگی کلاس ;display: none را به استیل این عنصر اضافه کنید تا نمایش نیابد. اگر بعدا به این اطلاعات نیاز پیدا کردید، براحتی این کلاس را حذف یا کامنت کرده و کادر مجددا فعال می شود. عنصر حاوی این عدد دارای کلاس ;position: fixed است. بدین طریق همیشه نمایش یافته و جلوی چشم است حتی اگر به پایین صفحه اسکرول کنید و با چیدمان صفحه تداخلی ندارد.

اضافه کردن کد جاوا اسکریپت ابزار

فایل جاوا اسکریپت که در مرحله قبل ساخته و در پوشه js تمپلیت جوملا بارگذاری کردید را در یک ویرایشگر متن باز کرده و خطوط کد زیر را در آن درج کنید:

 (function($) {
    $(document).ready(function() {
        var openWidth = $(window).width();
        $("#screenwidth").html('<p>Screen: ' + openWidth + 'px</p>'); 
        $( window ).resize(function() {
            var newWidth = $(window).width();
            $("#screenwidth").html('<p>Screen: ' + newWidth + 'px</p>'); 
        });
    })
})(jQuery);

می خواهید بدانید این کد چه کاری انجام می دهد:

 (function($) { ... })(jQuery);

کد جی کوئری در این تابع گذاشته می شود تا در مد no-conflict نیز فعال باشد و عملکرد مربوطه را انجام دهد.

var openWidth = $(window).width();

این کد یک متغیر ایجاد می کند به نام openWidth که اطلاعات فراهم شده توسط تابع ;()width. جی کوئری در آن ذخیره شود. اصطلاح پنجره (window) به عنصر پنجره DOM اشاره دارد، که همان پنجره نمایشگر است. این تابع در تبلت و موبایل و تلفن نیز نمایش خواهد یافت.

$("#screenwidth").html('<p>Screen: ' + openWidth + 'px</p>');

در این کد جی کوئری از تابع ()html. برای ایجاد <div> که ما در فایل index.php ایجاد خواهیم کرد و اطلاعات صفحه نمایش در آن ظاهر می شوند، استفاده می شود.

$( window ).resize(function() {

در اینجا از تابع ()resize. جی کوئری استفاده شده است تا مقدار نمایش یافته در داخل <div> با کوچک و بزرگ شدن صفحه نمایش تغییر داده شود.

این سند را با نام screenwidth.js ذخیره کنید. اگر تا کنون سند را آپلود نکرده اید، آن را در پوشه js قالب جوملا بارگذاری کنید.

سبک دهی این عنصر جدید

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

#screenwidth {
   position: fixed;
   top: 20px;
   right: 20px;
   width: 100px;
   padding:2px 5px 0 5px;
   height: 25px;
   z-index: 100;
   background: #fff;
}

این کد <"div id="screenwidth> را سبک دهی کرده تا بطور ثابت در گوشه سمت راست بالای پنجره مرورگر نمایش یابد.

ویرایش فایل index.php و لینک کردن فایل جاوا اسکریپت به قالب جوملا

در اینجا فایل index.php ویرایش شده و لینک فایل جاوا اسکریپت (js) به آن اضافه می شود، سپس این عنصر به کد HTML سایت اضافه می شود تا عدد را نمایش دهد.

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

فایل index.php را در یک ویرایشگر متن باز کنید. آخرین تگ ?> در کد PHP بخش بالایی صفحه را پیدا کنید. خطوط کد زیر را قبل از تگ بستن ?> درج کنید:

/*****CUSTOM*****/
$doc->addScript('templates/' . $this->template . '/js/screenwidth.js');
/*****END CUSTOM*****/

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

کمی پایین تر به بخش <html> فایل index.php بروید. تگ <body> را پیدا کنید. کد زیر را بلافاصله زیر این تگ درج کنید:

<!--- CUSTOM -->
<div id="screenwidth"></div>
<!--- END CUSTOM -->

این کد یک <div> به صفحه اضافه می کند که اطلاعات را نمایش می دهد. به شیوه کامنت گذاری بالا و پایین کد توجه کنید. کامنت باعث می شود بدانید کدام بخش های فایل را ویرایش کرده اید.

کار خود را تست کنید

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

برای حذف این کادر پس از اتمام سبک دهی وبسایت، استیل شیت خود را ویرایش کرده و یک کلاس display: none به عنصر #screenwidth اضافه کنید.