Memperhatikan meningkatnya penggunaan perangkat seluler, sejak akhir April 2015, Google telah memberikan sanksi kepada situs web yang halamannya tidak siap untuk seluler. Konsekuensinya, untuk Anda SEO, Anda perlu memastikan bahwa situs web Anda ditampilkan dengan baik di layar besar dan kecil.
Dalam artikel ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menempatkan situs web Anda ke halaman menggunakan aturan @media Dari CSS3
Penting untuk dicatat bahwa istilah "responsif" dan "kompatibel dengan seluler" sering kali digunakan secara bergantian meskipun ada perbedaan dalam arti sebenarnya. Penting untuk memahami arti masing-masing untuk dapat memastikan bahwa situs web Anda memenuhi kriteria yang diperlukan untuk mengakomodasi semua ukuran layar.
Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda
Lalu, mari kita kembali ke alasan kita ada di sini.
Responsif dan kompatibel-mobile
Situs web yang tidak Tidak responsif maupun tidak kompatibel-mobile, Ditampilkan secara identik di semua layar, yaitu versi untuk layar besar ditampilkan di mana-mana. Pada layar yang lebih kecil, Anda harus menggulir halaman secara horizontal untuk melihat semua kontennya. Mereka sulit dinavigasi di layar ini.
Temukan juga ini Plugin 8 WordPress untuk menyesuaikan tampilan situs web Anda
Situs web adalah selular yang kompatibel ketika itu hanya memenuhi minimum ketat untuk dilihat di seluler, yang tidak menjadikannya situs web responsif. Misalnya, situs web dapat dianggap kompatibel untuk seluler jika Anda tidak harus menavigasi secara horizontal. Ini menyebabkan elemen-elemennya menjadi kecil dan tidak bisa dibedakan. Anda kemudian harus memperbesar untuk membaca isinya.
Di sisi mereka situs web responsif beradaptasi dengan sempurna ke berbagai ukuran layar. Mereka mendefinisikan ulang elemennya sehingga dapat dengan mudah dilihat dan digunakan pada layar terkecil. Ini adalah jenis desain yang Anda inginkan untuk situs web Anda.
Lihat juga kami Plugin 10 WordPress untuk membuat formulir pemesanan di situs web Anda
Anda sekarang tahu perbedaan antara ponsel responsif dan kompatibel. Kita sekarang akan melihat aturannya @media CSS3 yang memungkinkan Anda memperbarui situs web Anda agar responsif atau dibuat dengan cukup mudah Tema WordPress dengan konten yang responsif.
Aturannya @media Dari CSS3
Untuk membuat tema Anda responsif, Anda perlu aturan @media dari CSS3. Pada dasarnya, ini memungkinkan Anda menentukan gaya yang ingin Anda gunakan untuk jenis layar tertentu (ukuran). Anda akan menggunakannya seperti aturan CSS lain (dengan tanda kurung) dengan satu-satunya perbedaan yang tumpang tindih dengan aturan CSS lainnya.
@media media-type (ekspresi) {css-test-selector {property1: value1; properti2: nilai2; }}
Dalam struktur ini elemen di dalam aturan @ Media Beroperasi hanya jika jenis-of-media ditentukan telah berhasil terdeteksi. Jenis media yang dipilih, Anda dapat menentukan karakteristik dalam hal dimensi.
Temukan Cara Mendaftar Antarmuka dan Pengalaman Pengguna ke WordPress
Aturannya @media mendeteksi untuk Anda jenis layar yang dikunjungi situs web Anda dan memilih aturan yang paling sesuai untuk jenis layar ini. Semua browser utama telah mengintegrasikan aturan tersebut @media.
Berikut adalah daftar untuk informasi Anda: Chrome , Safari, Firefox, IE, Opera et Tepi.
Tentukan layar target
Jika Anda ingin memodifikasi tema WordPress yang sudah ada, harap buat salinan cadangan dari CSS yang terakhir agar dapat kembali jika perlu.
Baca juga artikel kami di Bagaimana cara memuat komentar Facebook dan Disqus secara bertahap
Seperti yang telah kita lihat dalam strukturnya, untuk menentukan jenis layar, Anda harus meneruskan @media jenis layar yang ditargetkan. Berikut adalah daftar berbagai jenis layar:
- semua : untuk semua jenis layar atau untuk dimensi yang ditentukan di ekspresi
- layar : untuk semua layar, baik ponsel, tablet, laptop atau desktop
- mencetak : untuk printer, jika Anda menginginkan gaya khusus untuk halaman yang dapat dicetak
- pidato : untuk pembaca layar, jika Anda menginginkan gaya untuk tunanetra.
Ada juga operator yang bisa Anda tempatkan sebelum tipe layar; sebagai tidak untuk menampilkan gaya layar yang jenisnya berbeda dari yang ditentukan atau hanya untuk menerapkan gaya hanya ke layar tertentu. Oleh karena itu, Anda dapat memiliki:
@media layar saja
Tentukan gaya untuk dimensi layar
Anda dapat menggunakan ekspresi untuk memberikan detail lebih lanjut tentang karakteristik layar. Setelah @media masuk dan diikuti dengan ekspresi. Jika Anda menggunakan beberapa ekspresi, semuanya harus dipisahkan oleh dan. Berikut ini contoh strukturnya:
@media hanya layar dan (max-width: 640px) {selector-css-example {/ * CSS biasa Anda di sini * /}}
Dalam contoh ini saya gunakan max-width Dengan nilai 640px. Ini untuk menyetel lebar layar maksimum seukuran iPhone atau smartphone Android kecil. Dengan struktur semacam ini, Anda memiliki kendali atas tampilan situs web Anda di berbagai perangkat. Berikut adalah daftar properti yang terkait dengan dimensi yang dapat Anda gunakan ekspresi :
Temukan juga milik kami 8 SEO WordPress plugin untuk mengoptimalkan SEO dari website anda
- mdi-lebar et max-width : masing-masing lebar minimum dan maksimum yang diperlukan untuk tampilan gaya yang terdapat dalam aturan @media. Satu lagi piksel dan gaya tidak ditampilkan.
- mdi-height et max-height : masing-masing tinggi minimum dan maksimum yang diperlukan untuk menampilkan gaya yang terdapat dalam aturan @media. Karena sebagian besar layar dirancang untuk membuka gulungan halaman secara vertikal, properti min-height et max-height sedikit digunakan.
Berikut adalah daftar ukuran layar untuk beberapa terminal:
- IPhone: 640px
- iPad: 1024px
- Tablet: 1366px
- Ponsel cerdas Android: 640px, 720px, 854px, 960px
- Android ekstra besar: 1024px, 1066px
- Telepon Windows: 480
- Windows phone besar: 768px
- tua dan muda: 320px
- Ultrabook / Laptop: 1366px
- Desktop dan TV: 1920px
Ada banyak properti lain yang dapat Anda gunakan ekspresi. Misalnya, jika Anda menargetkan desktop atau layar televisi yang mampu menampilkan gambar dengan rasio aspek 16: 9, Anda dapat menggunakan struktur seperti ini:
@media hanya layar dan (min-width: 1920px) dan (device-aspect-ratio: 16/9) {selector-css-example {/ * CSS biasa Anda di sini * /}}
Untuk daftar dan contoh yang lebih lengkap, konsultasikan w3schools et Mozilla Developpers.
Uji fungsionalitas responsif situs web Anda
Saat Anda memodifikasi atau membangun tema WordPress atau pada akhirnya jika Anda menyukai kejutan, Anda harus menguji hasilnya untuk melihat apakah akhirnya responsif. Ingat, Google mengawasi situs web yang tidak responsif.
Lihat juga ini Plugin 10 WordPress untuk membuat tab di blog Anda
Gagal memiliki semua perangkat seluler yang Anda targetkan, ada (untungnya bagi bursa saham kami) sejumlah alat yang bagus untuk melihat bagaimana situs web Anda beradaptasi dengan layar yang berbeda.
Langsung di browser komputer Anda bisa Anda gunakan Ekstensi Browser Penjelajah Jendela Resizer, ResponsiveResize, ResizeMe ou Firesizer. Di bawah ini adalah gambar BlogPasCher di Tampilan Desain Responsif yang datang secara default dengan Firefox.
Ada juga situs web yang didedikasikan untuk tugas ini:
Situs web ini memiliki kekhasan yang memungkinkan Anda memilih sendiri dimensi layar. Sadarilah bahwa situs web ini memuat milik Anda dalam sebuah bingkai. Jadi jika Anda tema WordPress dirancang untuk tidak ditampilkan dalam bingkai, jadi kemungkinan besar tidak akan ditampilkan di sini.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Situs web ini menarik untuk menguji situs web Anda pada perangkat Apple, iPad, dan iPhone terbaru. Cukup masukkan URL Anda. Perhatikan bahwa ini tunduk pada masalah bingkai yang sama seperti responsivepx.
Di situs web ini Anda dapat menguji milik Anda di layar kecil dan pada model ponsel lama yang Anda pilih di sisi kanan layar. Anda juga dapat mengonfigurasi beberapa properti layar.
Ini adalah salah satu tes terpenting, jika bukan yang terpenting. Cukup masukkan alamat Anda di bilah dan klik Menganalisa untuk memulai pengujian. Setelah pengujian, alat tersebut menampilkan laporan dan skor. Jika hasil tesnya positif, semakin baik, Anda tidak akan dihukum oleh Google.
Jika Anda bukan seorang pengembang, saya menyarankan Anda daftar tema WordPress responsif untuk memulai.
Sumber Daya yang Direkomendasikan
Juga temukan sumber daya lain yang direkomendasikan yang akan membantu Anda menarik mitra dan pelanggan Anda dengan lebih baik, tetapi juga untuk meningkatkan keamanan situs web Anda.
- Cara membuat program link kustom pada WordPress
- Plugin 5 WordPress untuk menambahkan ulasan pelanggan ke blog Anda
- Cara membuat roda keberuntungan untuk kupon di WooCommerce
- Temukan Penawaran & Kupon Terbaik untuk Blog Anda
Kesimpulan
Sini! Anda tahu segalanya yang perlu diketahui tentang cara membuat situs web atau tema WordPress Anda responsif menggunakan aturan tersebut @media Dari CSS3 Jika kami melewatkan tema WordPress yang Anda sukai atau yang Anda sukai, tinggalkan tautan di bagian ini komentar di bawah ini.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Kami juga mengundang Anda untuk berbagi di jejaring sosial Anda yang berbeda.
...
