با توجه به افزایش استفاده از دستگاه های تلفن همراه، از اواخر آوریل 2015، گوگل وب سایت هایی را که صفحات آنها برای موبایل آماده نیست جریمه کرده است. نتیجه، برای شما SEO، باید مطمئن شوید که وب سایت شما در هر دو صفحه نمایش بزرگ و کوچک به خوبی نمایش داده می شود.
در این مقاله به شما نشان می دهم که چگونه می توانید وب سایت خود را با استفاده از یک قانون در صفحه قرار دهید media از CSS3
توجه به این نکته ضروری است که اصطلاحات "پاسخگو" و "سازگار با تلفن همراه" علی رغم تفاوت در معنای واقعی آنها ، اغلب به جای یکدیگر استفاده می شوند. درک اینکه هر یک به چه معناست مهم است تا بتوانید اطمینان حاصل کنید که وب سایت شما معیارهای لازم را برای مطابقت با اندازه صفحه نمایش دارد.
اما قبل از آن ، اگر هرگز WordPress را نصب نکرده اید کشف کنید چگونه به نصب یک وبلاگ وردپرس مراحل 7 et چگونه برای پیدا کردن، نصب و فعال یک تم وردپرس در وبلاگ خود
سپس ، برگردیم به اینکه چرا ما اینجا هستیم.
پاسخگو و همراه سازگار است
وب سایت هایی که نیستند نه پاسخگو و نه سازگار موبایل، به طور یکسان در تمام صفحه ها نمایش داده می شوند ، یعنی نسخه برای صفحه های بزرگ در همه جا نمایش داده می شود. در صفحه های کوچکتر ، باید صفحه را به صورت افقی پیمایش کنید تا تمام محتوای آنها را ببینید. پیمایش آنها در این صفحات دشوار است.
اینها را نیز کشف کنید پلاگین های WordPress 8 برای سفارشی کردن ظاهر وب سایت شما
یک وب سایت است موبایل های سازگار هنگامی که فقط حداقل قابل مشاهده در تلفن همراه را داشته باشد ، که آن را به یک وب سایت پاسخگو تبدیل نمی کند. به عنوان مثال ، اگر نیازی به پیمایش افقی ندارید ، یک وب سایت را می توان سازگار با تلفن همراه دانست. این امر باعث می شود که عناصر آن کوچک و غیر قابل تشخیص شوند. سپس برای خواندن محتوای آن باید بزرگنمایی کنید.
از طرف آنها وب سایتها پاسخگو کاملاً متناسب با اندازه های مختلف صفحه نمایش. آنها عناصر خود را دوباره تعریف می کنند تا به راحتی در صفحه های کوچکتر دیده و استفاده شوند. این نوع طراحی شما برای وب سایت شماست.
همچنین به ما مراجعه کنید پلاگین های WordPress 10 برای ایجاد یک فرم رزرو در وب سایت خود
اکنون تفاوت بین تلفن همراه پاسخگو و سازگار را می دانید. اکنون این قانون را خواهیم دید media از CSS3 که به شما امکان می دهد وب سایت خود را به صورت واکنش گرا یا به راحتی ایجاد کنید مضامین وردپرس با محتوای واکنش گرا
حکومت media از CSS3
برای پاسخگو بودن موضوع ، به این قانون احتیاج دارید media از CSS3. در اصل ، به شما امکان می دهد سبک هایی را که می خواهید برای نوع خاصی از صفحه (اندازه) استفاده کنید ، تعریف کنید. شما از آن مانند یک قانون CSS دیگر (با بریس) استفاده خواهید کرد با این تفاوت که با دیگر قوانین CSS همپوشانی دارد.
media media type-type (عبارت) {css-test-selector {property1: value1؛ ویژگی 2: مقدار 2؛ }}
در این ساختار عناصر داخل قاعده است @ رسانه تنها زمانی عمل می کند که نوع از رسانه مشخص شده است که با موفقیت تشخیص داده شده است. نوع رسانه انتخاب شده ، می توانید مشخصات را از نظر ابعاد مشخص کنید.
کشف نحوه اعمال رابط و تجربه کاربری در وردپرس
حکومت media نوع صفحه بازدید از وب سایت شما را برای شما تشخیص می دهد و قوانینی را که مناسب این نوع صفحه نمایش است انتخاب می کند. همه مرورگرهای اصلی قبلاً قانون را ادغام کرده اند media.
در اینجا لیستی برای اطلاعات شما وجود دارد: کروم , سیاحت اکتشافی در افریقا, فایرفاکس, IE, اپرا et لبه.
صفحه های هدف را تعریف کنید
اگر می خواهید a را اصلاح کنید تم وردپرس موجود، لطفاً یک نسخه پشتیبان از CSS دومی تهیه کنید تا در صورت لزوم بتوانید به عقب برگردید.
مقاله ما را نیز بخوانید چگونه به تدریج نظرات فیس بوک و Disqus را بارگیری کنیم
همانطور که در ساختار آن مشاهده کردیم ، برای تعریف نوع صفحه نمایش ، باید جلو بروید media نوع صفحه مورد نظر در اینجا لیستی از انواع مختلف صفحه وجود دارد:
- تمام : برای انواع صفحه ها یا برای ابعادی که در آنها مشخص شده است بیان
- پرده : برای همه صفحه ها ، چه موبایل ، رایانه لوحی ، لپ تاپ یا دسک تاپ
- چاپ : برای چاپگرها ، اگر سبک خاصی برای صفحات قابل چاپ می خواهید
- سخنرانی - گفتار : برای خوانندگان صفحه نمایش ، اگر سبک هایی برای افراد کم بینا می خواهید.
همچنین اپراتورهایی وجود دارد که می توانید آنها را قبل از نوع صفحه نمایش قرار دهید. مانند نه برای نمایش سبک هایی برای صفحه هایی که از نوع دیگری متفاوت از نوع مشخص شده یا فقط برای اعمال سبک ها فقط روی صفحه های مشخص شده بنابراین می توانید داشته باشید:
media تنها صفحه نمایش
سبک ها را برای ابعاد صفحه تعریف کنید
شما می توانید با استفاده از بیان برای ارائه جزئیات در مورد ویژگی های صفحه نمایش. بعد از media وارد شدن و به دنبال آن بیان می شود. اگر از بیش از یک عبارت استفاده می کنید ، باید همه آنها را با جدا کنید و. در اینجا نمونه ای از ساختار آمده است:
فقط صفحه نمایشmedia و (حداکثر عرض: 640px) {selector-css-example {/ * CSS معمول شما در اینجا * /}}
در این مثال من استفاده می کنم حداکثر عرض با ارزش 640px. این برای تنظیم حداکثر عرض صفحه به اندازه یک آیفون یا یک تلفن هوشمند کوچک Android است. با استفاده از این نوع ساختار ، شما می توانید بر روی نحوه مشاهده وب سایت خود در دستگاه های مختلف کنترل داشته باشید. در اینجا لیستی از خصوصیات مربوط به ابعادی وجود دارد که می توانید در آنها استفاده کنید بیان :
ما را نیز کشف کنید 8 SEO پلاگین وردپرس برای بهینه سازی جستجوگرها از وب سایت شما
- mدر عرض et حداکثر عرض : به ترتیب حداقل و حداکثر عرض مورد نیاز برای نمایش سبکهای مندرج در قانون media. یک پیکسل و سبک دیگر نمایش داده نمی شود.
- mدر ارتفاع et حداکثر ارتفاع : به ترتیب حداقل و حداکثر ارتفاع مورد نیاز برای نمایش سبک های مندرج در قانون media. از آنجا که اکثر صفحه نمایش ها برای جدا کردن صفحات به صورت عمودی ، خاصیت ها طراحی شده اند حداقل ارتفاع et حداکثر ارتفاع کمی مورد استفاده قرار می گیرند
در اینجا لیستی از اندازه صفحه نمایش برای برخی از ترمینال ها وجود دارد:
- iPhone: 640px
- iPad: 1024px
- قرص ها: 1366px
- تلفن هوشمند اندرویدی: 640 پیکسل ، 720 پیکسل ، 854 پیکسل ، 960 پیکسل
- اندروید فوق العاده بزرگ: 1024px ، 1066px
- تلفن ویندوز: 480
- تلفن ویندوز بزرگ: 768 پیکسل
- پیر و جوان: 320 پیکسل
- اولترابوک / لپ تاپ: 1366px
- میز کار و تلویزیون: 1920px
بسیاری از خواص دیگر وجود دارد که می توانید در آنها استفاده کنید بیان. به عنوان مثال ، اگر میز کار یا صفحه های تلویزیونی را قادر به نمایش تصاویر با نسبت ابعاد 16: 9 می کنید ، می توانید از ساختاری مانند این استفاده کنید:
فقط صفحه نمایشmedia و (عرض حداقل: 1920px) و (نسبت ابعاد دستگاه: 16/9) {selector-css-example {/ * CSS معمول شما در اینجا * /}}
برای لیست ها و نمونه های کامل تر، مشورت کنید w3schools et موزیلا Developpers.
عملکرد پاسخگو وب سایت خود را تست کنید
همانطور که خود را تغییر می دهید یا می سازید تم وردپرس یا در انتها اگر سورپرایز دوست دارید، باید نتیجه را تست کنید تا ببینید در نهایت پاسخگو است یا خیر. به یاد داشته باشید، گوگل برای وب سایت هایی که واکنش گرا نیستند تماشا می کند.
همچنین اینها را ببینید افزونه های 10 WordPress برای ایجاد زبانه ها در وبلاگ شما
در صورت نداشتن همه دستگاه های موبایلی که هدف قرار داده اید ، (خوشبختانه برای بورس های سهام ما) تعداد زیادی ابزار وجود دارد که می تواند وب سایت شما را با صفحات مختلف سازگار کند.
به طور مستقیم به مرورگر از کامپیوتر شما شما می توانید استفاده پنجره افزونه مرورگر کروم به resizer, ResponsiveResize, ResizeMe ou Firesizer. در زیر تصویری از BlogPasCher در نمای طراحی پاسخگو که به طور پیش فرض با Firefox آمده است.
وب سایتهایی نیز وجود دارد که به این کار اختصاص داده شده است:
این وب سایت دارای ویژگی خاصی است که به شما امکان می دهد ابعاد صفحه نمایش را خودتان انتخاب کنید. توجه داشته باشید که این وب سایت شما را در یک قاب بارگذاری می کند. بنابراین اگر شما تم وردپرس طراحی شده است که در یک قاب نمایش داده نشود، بنابراین کاملاً ممکن است در اینجا نمایش داده نشود.
اپل زیرچشمی نگاه کردن
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
این وب سایت برای آزمایش وب سایت شما در جدیدترین دستگاه های اپل ، iPad و iPhone مفید است. فقط URL خود را وارد کنید. توجه داشته باشید که مشکلی از همان فریم ریسپانسیو ندارد.
در این وب سایت می توانید تلفن های خود را در صفحه های کوچک و مدل های قدیمی تلفن هایی که در سمت راست صفحه انتخاب می کنید ، آزمایش کنید. همچنین می توانید برخی از خصوصیات صفحه را پیکربندی کنید.
این یکی از مهمترین تست ها است ، اگر مهمترین نباشد. فقط آدرس خود را در نوار وارد کنید و بر روی کلیک کنید تجزیه و تحلیل برای شروع آزمون. بعد از آزمون ، ابزار گزارش و نمره را نمایش می دهد. اگر آزمون مثبت باشد ، بهتر از همه ، مجازات Google نخواهید شد.
اگر شما یک توسعه دهنده نیستید ، من به شما توصیه می کنم لیستی از مضامین پاسخگو وردپرس برای شروع.
منابع پیشنهادی
همچنین سایر منابع توصیه شده را کشف کنید که به شما کمک می کند شرکا و مشترکان خود را بهتر اغوا کنید ، اما همچنین امنیت وب سایت خود را بهبود می بخشد.
- چگونه برای ایجاد لینک های سفارشی در وردپرس
- افزونه های 5 وردپرس برای اضافه کردن نظرات مشتری به وبلاگ خود
- چگونه برای ایجاد یک چرخ ثروت برای کوپن در WooCommerce
- بهترین پیشنهادات و کوپن ها را برای وبلاگ خود کشف کنید
نتیجه
اینجا ! شما می دانید که همه چیز در مورد چگونگی پاسخگویی به موضوع وب سایت یا وردپرس خود با استفاده از قانون می دانید media از CSS3 اگر یک موضوع وردپرس را فراموش نکرده ایم که برای شما عزیز است یا شما آن را ترجیح می دهید ، لطفاً یک پیوند را در بخش بگذارید نظر CI-dessous.
با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
ما همچنین شما را دعوت می کنیم در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
