ما در دنیایی با کیفیت بالا زندگی می کنیم. و از آنجا که بیشتر ما بیش از هشت ساعت در روز را صرف تماشای انواع مختلف صفحه نمایش می کنیم ، کیفیت تصاویر و شخصیت های موجود در این صفحه ها بسیار مهم هستند.
اگرچه فقط چند سال است که در دسترس نیستند ، نمایشگرهای شبکیه چشم راهی برای آینده هستند. تراکم بالای پیکسل در نمایشگرهای رتینا تصاویر را واضح و واضح می کند. و چه کسی تصاویر خوب و واضح را دوست ندارد؟
یاد بگیرید که چگونه ایجاد یک وب سایت سازگار با صفحه نمایش رتینا یک دارایی مهم برای هر توسعه دهنده وب است. متأسفانه، هیچ راه حل ایده آل و کاملی برای کاربرپسند کردن وب سایت شما با نمایشگرهای Retina-Ready وجود ندارد.
بنابراین در حالی که منتظر می مانیم شخصی کاملترین راه حل را پیدا کند ، بهترین گزینه های ممکن را برای آماده سازی وب سایت شما بررسی کرده ایم. به این ترتیب ، وقتی زمانی فرا برسد که تمام دستگاه ها دارای شبکیه چشم در یک شکل یا شکل دیگر باشند ، گمراه نخواهید شد.
اما قبل از شروع ، وقت بگذارید تا نگاهی بیندازید چگونه برای نصب یک تم وردپرس, چگونه بسیاری از پلاگین ها باید بر روی وردپرس نصب کنم.
بعد بیایید کار کنیم!
ایجاد چندین فایل تصویری
بیایید با اصول شروع کنیم. ساده ترین راه برای دریافت پشتیبانی حالت Retina برای وب سایت خود این است تغییرات مختلف تصویر را در رزولوشن های مختلف ایجاد کنید. این بدان معنی است که برای هر نوع وضوح (یعنی 1 برابر) شما باید یک نسخه با وضوح بالا از آن کلیپ (یعنی 2 برابر) ایجاد کنید.
در واقع می توانید چندین نسخه از همان پرونده ایجاد کنید و از یک افزونه مانند WP Retina 2x یا اسکریپتی مانند retina.js برای تولید خودکار نسخه های "@ 2x" از هر اندازه تصویر استفاده کنید یا تصاویر "@ 2x" را پیدا کرده و نمایش دهید اندازه مربوط به هر دستگاه
درست است که ایجاد چندین نسخه از یک تصویر می تواند یک پروسه زمانبر باشد. متأسفانه ، هیچ روش سریع وجود ندارد که به طور خودکار این تصاویر را برای شما تولید کند. با این حال، چندین افزونه فتوشاپ وجود دارد که به شما امکان می دهد به سرعت تصاویر خود را ترمیم کنید.
افزونه هایی مانند " Retinize آن که مجموعه ای از اقدامات فتوشاپ است که به شما امکان می دهد طراحی خود را برای نمایشگرهای Retina به راحتی بهینه کنید. اگر از نسخه قدیمی Photoshop (پیش از CC) استفاده می کنید ، می توانید از چیزی مانند " چهار که اساساً همه کارهایی را که ابزار فعلی Photoshop Generator انجام می دهد انجام می دهد ، اما برای نسخه های قدیمی Photoshop.
گرافیک برداری مقیاس پذیر (SVG)
ساده ترین راه برای ادامه کار با حالت شبکیه چشم استفاده از نمودارهای برداری مقیاس پذیر (SVG) در وب سایت خود است. SVG یک قالب تصویر برداری مبتنی بر XML است. همانطور که از نامش پیداست ، یک تصویر SVG مقیاس پذیر است ، به این معنی که تصاویر می توانند تا آنجا که لازم است (یا در کمترین حالت) کشیده شوند ، در حالی که هنوز واضح و واضح هستند. این می تواند یک روش سریع و آسان برای شما برای اجرای حالت شبکیه چشم بدون تلاش زیاد باشد.
دفعات بازدید: نحوه تهیه تصاویر WebP به جای PNG و JPG سنتی
با این حال ، استفاده از SVG در وردپرس دو نکته منفی دارد. اولین مورد این است که از آنجا که یک قالب برداری است ، SVG برای همه تصاویر مناسب نیست. بنابراین می توانید از SVG برای آرم ها و نمادها استفاده کنید ، اما نه برای پرونده هایی مانند عکس (اگر دوست دارید از تصاویر با وضوح بالا برای وب سایت خود استفاده کنید کمی دردناک است). اما اگر می خواهید از نمادها ، انیمیشن ها یا تصاویر ساده استفاده کنید ، مطمئنا پرونده های SVG می تواند گزینه ای برای یک وب سایت سازگار با شبکیه باشد.
دومین نکته منفی استفاده از SVG در وردپرس این است که به دلیل مشکلات امنیتی یک قالب رسمی سازگار با وردپرس نیست. از آنجا که یک فایل SVG اساساً یک پرونده XML است ، این پرونده را به روی آن باز می کند همه آسیب پذیریهای شناخته شده مرتبط با قالب پرونده XMLمانند تجزیه و تحلیل اجباری ، حملات XML External Entity (XEE) ، XML Denial of Service Attack (XDoS) و غیره
با این حال ، روشی برای فعال کردن پشتیبانی SVG برای وب سایت شما وجود دارد که باعث می شود فایل های SVG شما ایمن شوند.
چگونه با خیال راحت SVG را در وردپرس فعال کنید
SVG ایمن افزونه ای است که به شما امکان می دهد به طور ایمن پشتیبانی از پرونده SVG را در وب سایت خود فعال کنید. این پلاگین اطمینان می دهد که پرونده های SVG شما ضد عفونی شده است تا از آسیب پذیری های احتمالی XML در وب سایت شما جلوگیری کند.
از افزونه هایی که اجازه می دهد نوع MIME اجازه بارگذاری از SVG در کتابخانه رسانه وردپرس را داشته باشد ، دور باشید زیرا این موارد برای وب سایت شما خطرناک و به طور بالقوه مضر هستند. بنابراین اگر واقعاً وسوسه شده اید که از قالب SVG در وردپرس استفاده کنید ، مطمئن شوید که این کار را با خیال راحت انجام داده اید و اولین پلاگین SVG را که می بینید بارگیری نکنید.
با خواندن ما ، تبدیل های بیشتری را به وبلاگ خود هدایت کنید انواع محتوای 15 که مطالب بیشتری را برای وبلاگ شما ایجاد می کنند
برخی افزونه ها برای ادغام سازگاری شبکیه در وردپرس
چندین اسکریپت و پلاگین برای سازگاری با شبکیه چشم وجود دارد که می تواند هنگام راه اندازی یک وب سایت سازگار با حالت Retina زندگی شما را بسیار آسان کند. با این حال ، همانطور که قبلا ذکر شد ، بیشتر پلاگین ها و اسکریپت های موجود ، تصاویر خود را با تصاویر با وضوح بالا فقط برای نمایشگرهای با وضوح بالا جایگزین می کنند. آنها مانند SVG کشیده نمی شوند: شما هنوز هم نیاز به ایجاد چندین تصویر با وضوح مختلف دارید.
1 - retina.js
retina.js یکی از پرکاربردترین اسکریپت ها برای ارائه تصاویر با وضوح بالا است. این یک اسکریپت منبع باز است که ارائه تصاویر با وضوح بالا را برای دستگاه های دارای صفحه نمایش Retina آسان می کند.
اسکریپت هر تصویر موجود در صفحه را بررسی می کند تا ببیند آیا یک نسخه با وضوح بالا از آن تصویر در سرور وجود دارد یا خیر. اگر یک نوع با وضوح بالا وجود داشته باشد ، اسکریپت وضوح استاندارد را با تصویر با وضوح بالا عوض می کند. این یکی از متداول ترین روش های ارائه تصاویر برای نمایشگرهای شبکیه چشم در وب سایت شماست.
همچنین مشاهده کنید: GIF ، Emojis یا Memes: ایده خوبی برای وب سایت های وردپرس است؟
2 - متراکم
مشابه retina.js ، متراکم یک پلاگین jQuery است که روشی آسان برای ارائه تصاویر در قالب نسبت پیکسل را ارائه می دهد. اسکریپت روش $ .fn.dense () مقداردهی اولیه را فراخوانی می کند ، که برچسبهای "img" را هدف قرار می دهد و در صورت لزوم به عنوان تصاویر سازگار با حالت Retina عمل می کنند.
بنابراین ، تمام تصاویر را با نسخه وضوح بالا مربوطه ، دقیقاً مانند اسکریپت retina.js جایگزین می کند.
3 - WP شبکیه چشم 2x
دومی را می توان به یک مولد جادویی تصویر شبکیه تشبیه کرد.
WP شبکیه چشم 2x افزونه ای است که فایلهای تصویری مورد نیاز دستگاههای High-DPI را ایجاد می کند و بر این اساس آنها را برای بازدید کنندگان شما نمایش می دهد. برخلاف دو اسکریپت قبلی ، تصاویر با وضوح مختلف از یک تصویر اولیه تولید می کند. بنابراین اگر از ایجاد دستی تصاویر مختلف با رزولوشن های مختلف خیلی راضی نیستید ، این گزینه برای شما مناسب است.
این همه برای این آموزش است ، امیدوارم این امکان را برای شما فراهم کند تا تصاویر خود را به تصویر Retina Ready تبدیل کنید.
همچنین برخی از افزونه های برتر WordPress را کشف کنید
می توانید از موارد دیگر استفاده کنید افزونه های وردپرس برای دادن ظاهری مدرن و بهینه سازی مدیریت وبلاگ یا وب سایت شما.
ما در اینجا برخی از افزونه های برتر وردپرس را به شما پیشنهاد می دهیم که در انجام این کار به شما کمک می کنند.
1. لیست فانتزی وردپرس نویسنده
همانطور که از نام این پلاگین مشخص است لیست نویسندگان فانتزی وردپرس لیست نویسندگان وب سایت خود را در ویجت نمایش می دهد. این رابط کاربری ساده ای دارد که اجازه می دهد نمایش اطلاعات هر نویسنده در نوار کناری تمام کاری که شما باید انجام دهید این است که ویجت نویسنده را به نوار کناری بکشید و افزونه کار را انجام خواهد داد.
ویژگی های اصلی آن از جمله سایر موارد است: امکان برای نمایش نویسندگان وبلاگ در یک روش سرگرم کننده برای جذب بازدید کنندگان جدید ، امکان نمایش لیست نویسندگان در نوار کناری یا در صفحه ، توانایی مسابقه را شروع کنید بین نویسندگان وبلاگ شما ، یک طرح پاسخگو ، پشتیبانی از کد کوتاه و موارد دیگر.
بارگیری | نسخه ی نمایشی | میزبانی وب
2. فهرست آسان مطالب
Ce پلاگین وردپرس کاربرپسند به شما امکان می دهد فهرست مطالب را در پست ها، صفحات و انواع پست های سفارشی خود درج کنید. دارای ویژگی های زیادی است که مهمترین آنها عبارتند از:
مدیریت خودکار جدول مطالب ، پشتیبانی از برچسب ، پشتیبانی از افزونه Rankin Math ، سازگاری با چندین ویرایشگر صفحه مانند Gutenberg ، DIVI, Elementor, WPBakery صفحه ساز و سایر موارد ، امکان انتخاب انتشارات شما در صفحات مختلف ، درج اتوماتیک فهرست مطالب در صفحات خاص و بسیاری دیگر.
این یک پلاگین وردپرس نرم افزار رایگانی که همه چیزهایی که برای نمایش فهرست مطالب خود نیاز دارید را دارد، بنابراین با خیال راحت آن را به عنوان اولین انتخاب خود انتخاب کنید.
دانلود | نسخه ی نمایشی | میزبانی وب
3. WooCommerce Advanced Bulk Edit
آیا به طور مرتب کاتالوگ محصولات خود را ویرایش می کنید؟ چه 100 محصول داشته باشید چه 10.000، این پلاگین وردپرس حق بیمه به نظر متواضع من است: "باید": (این اولین کلمه ای است که به ذهن می رسد).
فقط برای چند دلار، افزونه ویرایش فله پیشرفته WooCommerce زندگی را آسان تر می کند و باعث صرفه جویی در وقت شگرف می شود. هیچ تردیدی وجود ندارد که این یک بمب باشد.
دانلود | نسخه ی نمایشی | میزبانی وب
منابع پیشنهادی
درباره سایر منابع پیشنهادی برای کمک به شما در ساخت و مدیریت وب سایت خود اطلاعات کسب کنید.
- شما احتمالا نمی دانید منابع ترافیکی 5
- مطالعه موردی: بازاریابی محتوا، چگونه به یادگیری از اشتباهات
- چرا آزادکاران نیاز به برنامه روزانه دارند
- جنبه های 7 که به شما کمک می کند یک وبلاگ موفق ایجاد کنید
نتیجه
اینجا ! این برای این آموزش است ، امیدوارم به شما این امکان را بدهد تا تصاویر آماده برای شبکیه چشم را برای وب سایت خود ایجاد کنید. دریغ نکنید با دوستان خود در شبکه های اجتماعی مورد علاقه خود به اشتراک بگذارید.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری نیاز دارید ، با مشاوره راهنمای ما در مورد ایجاد وبلاگ وردپرس.
اگر پیشنهادی یا اظهار نظر دارید ، آنها را در بخش ما بگذارید نظر.
...
