Tutorial Cara Membuat Theme WordPress Sendiri

Cara Membuat Tema WordPress Responsive Menunggangi HTML5

Cara Membuat Tema WordPress Responsive Menggunakan HTML5

Pembukaan

Tema WordPress ialah seperanggu file nan menyusun layout website Anda. Sebuah tema memiliki HTML, PHP, dan CSS, dan terkadang juga menggunakan JavaScript/jQuery.

Di latihan WordPress ini, Kamu akan mempelajari pendirian menciptakan menjadikan tema WordPress menggunakan HTML5, CSS3, dan pangkal desain nan paham. Ia pula akan mempelajari cara menjeniskan bermacam-macam bagian dari tema Kamu ke privat ‘templates’.

Tema, sebagaimana plugin, terpisah semenjak kode inti WordPress. Tema memperbolehkan website Ia memiliki layout nan tunak untuk setiap halaman dan post, dan dengan cepat dapat dimodifikasi maslahat mengubah seluruh tampilan website Anda. Buat menampilkan keterangan berasal WordPress atau isi post, Anda harus menggunakan template tag yang disediakan maka itu WordPress. Langkah ini selanjutnya akan dijelaskan dalam tuntunan ini.

Setelah menyelesaikan setiap langkah di kursus ini dan mewujudkan tema bau kencur WordPress, jangan lupa juga untuk membaca pelajaran cara membuat child theme WordPress unuk meluaskan barang apa yang sudah Anda pelajari di tutorial ini. Tema yang Kamu untuk dengan mengikuti tutorial ini dapat menjadi dasar untuk Anda selanjutnya takhlik child theme WordPress. Jika sudah memiliki pilihan tema dan hanya ingin menginstalnya, silakan baca cara upload tema WordPress.

Yang Anda Butuhkan

  • Text editor
  • Akses FTP ke akun hosting Anda
  • WordPress yang sudah diinstall

Kerjakan tanggulang langkah-ancang di latihan mewujudkan tema WordPress ini, Beliau membutuhkan text penyunting, seperti Notepad++ atau NetBeans. Anda juga membutuhkan akal masuk FTP ke akun hosting Anda dan WordPress yang sudah terinstall.

Kami lagi mengajurkan Anda untuk mengunduh CSS cheat sheat karena Anda akan menggunakannya untuk mengedit file WordPressstyle.css.

Apa Itu HTML5 dan Mengapa Anda Harus Menggunakannya?

HTML5 merupakan versi terbaru dari bahasa markup web HTML nan menawarkan selengkap fitur bertamadun nan memudahkan pada momen Anda hendak menampilkan konten secara konsisten di komputer, laptop, tablet, atau telepon genggam.

Perubahan signifkan sreg versi terbaru ini adalah adanya seperangkat unsur HTML semantik yang hijau. Sebagai contoh, footer mulai sejak jerambah HTML mana sekali lagi masa ini boleh dibuat menggunakan atom<footer></footer>. Web browser kemudian mengetahui bahwa konten yang termuat di dalamnya yaitu bagian dari footer. Lega versi HTML yang lama, konten footer dapat dibuat memperalat anasir generik, seperti<div></div>.

Dokumen dasar HTML5 akan terlihat seperti ini:

<!DOCTYPE html> <html lang="en">   <head>     <title>My HTML5 Page</title>     <meta charset="UTF-8">     <meta name=view port" content="width=device-width, initial-scale=1.0">     <link ril="stylesheet" href="css/normalize.min.css">     <link rel="stylesheet" href=css/main.css"> </head> <body>   <header>     <h1>My Website</h1>   </header>   <main>     <section>       <header>         <h2>My Articles</h2>       </header>       <article>         <header>           <h2>An Article</h2>         </header>         <p class="inline-text-box">Left</p><p class="inline-text-box">Right</p>       </article>      </section>     </main>     <footer>        <p>Copyright &copy; 2022</p>     </footer>    </body>   </html>

Apa Itu Desain Reaktif?

Desain responsif menunjukkan bahwa website Anda secara otomatis ditampilkan dalam format terbaik berdasarkan ukuran jib monitor para pengunjung. Secara harafiah, layout halaman ‘merespons’ space maupun urat kayu yang tersedia di jib monitor pengunjung. Konten ditempatkan dengan teoretis sehingga tidak cak semau nan kutung, tidak ada yang melebihi ukuran layar, dan tampilan website Anda jernih.

Apa itu desain responsif

Asumsikan layout website Anda sebagai seperangkat grid sehingga Beliau terlazim menyerahkan persentasi lebar grid pada konten. Sebagai contoh, div mengambil 50% dari ruang yang cawis, dan bukannya lebar 800px. Div dengan bogok halaman penuh menjeput 100% berusul ulas nan cawis, sehingga jika Anda mau menaruh keempat div di dalam baris, maka setiap div mengambil 25% dari ulas.

Bakal gambar, Kamu dapat mengaturnya moga memiliki lebar maksimum 100% dari matra sepatutnya ada dan atur panjang keauto. Pada saat container gambar berada di ukuran minimal, tataran dan lebar gambar akan secara otomatis memendek.

Apabila Anda memilihwidth: 100%alih-alihmax-width: 100%bagi kerangka, maka gambar akan mencoket 100% berusul ulas yang tersedia. Ukuran gambar lain akan memangkal sreg demes sebenarnya dalam format piksel. Jika lebar gambar 200px hanya berada di dalam div yang mengambil ira layar 100%, maka max-width mengindikasikan bahwa ukuran gambar tidak kian lebar bermula 200px.

/* GOOD WIDTH */ .inline-text-box {   width: 50%; } /* BAD WIDTH */ .inline-text-box {   width: 800px; } /* GOOD IMAGE */ img {   max-width: 100%;   height: auto } /* BAD IMAGE */ img {   width: 100%;   height: auto; }

Agar tema WordPress responsif sepenuhnya, Anda juga dapat menggunakan fitur CSS3, yakni media queries. Di dalam media queries, buatmedia typecak bagi memengaruhi (layar, print, dll) setidaknya satumedia feature(max-width, orientation, dll). Media feature bisa dikaitkan dengan suatu sejajar lain menggunakan prolog kunciand.

/* Media Type and Sarana Feature and Ki alat Feature*/ @wahana only screen and (min-width: 400px) and (max-width: 800px) {  .inline-text-box {    width: 100%;    display: block;  } } /* Media Feature Only */ @media (max-width: 1200px) {   .inline-text-box {     width: 50%;   } }
  • Di kamil pertama, CSS akan diterapkan di layar mana pun (layar monitor, layar telepon genggam, dll) yang mempunyai lebar (area di dalam browser, bukan keseluruhan layar) antara 400px dan 800px.
  • Pada arketipe kedua, CSS akan diterapkan di keberagaman media yang membacanya.
  • Jenis sarana lainnya adalah ‘print’, yang berarti CSS saja diterapkan seandainya pengguna mengejar print-preview halaman Anda.

Daftar lengkap mengenai jenis media dan media feature boleh dilihat di website Mozilla Developer Network.

Di CSS stylesheet, Engkau membuat rule yang menjatah perintah kapan konten diubah, konten barang apa yang diubah, dan mandu konten diubah. Anda dapat menyangkal atribut CSS menurut demes text box alias corak bidang pinggul div. Sejumlah lengkap rule sarana feature yang memberi perintah bilamana rule diterapkan:

  • max-width– lebar maksimum dari area browser yang bisa dilihat, sekiranya makin pepat berpokok ini, maka rule tidak dapat diberlakukan.
  • min-width
    – lebar minimum bagi distrik yang dapat dilihat, sekiranya kian kecil dari ini, maka rule lain bisa diberlakukan.
  • orientation– layar dalam mode portrait atau landscape.

Kita lihat contoh paling masyarakat momen Ia memiliki dua text box berpasangan dan keduanya mengambil 50% dari ukuran layar. Seandainya jendela browser mengecil, maka box akan secara otomatis menyesuaikan sehingga masih bisa mengambil 50% bermula ukuran tingkap alih-alih menghilang berbunga layar. Takdirnya ukuran tingkapan browser menjadi lewat kecil bikin menganjurkan semua teks dalam box tersebut, maka Dia bisa memberi perintah agar box cekut 100% dari ukuran jendela dan menampilkannya di atas yang enggak. Anda lagi bisa ondok konten seutuhnya jika dianggap tidak layak.

Anju 1 – Menyimpan Tema dan Filenya

Malah perlintasan kecil sekalipun lega tema dapat mengakibatkan website Anda tidak bisa digunakan. Kebanyakan, sesudah membuat perubahan sreg kode, Sira mencoba untuk meload website. Apa yang terjadi? Anda akan melihat layar jati sebagai pertandathe white screen of death(website blank masif). Mencari debug error yang menyebabkan layar putih tak semudah membalikkan jejak kaki tangan.

Agar tidak terjadi problem pada website Anda, maka sangat utama bakal mengetes semua pergantian offline. Setelah perubahan dilakukan, Anda dapatmengupload versi online berusul website Anda. Pelajari juga cara takhlikserver lokal kerjakan meluaskan WordPress di Windows.

Tema WordPress di simpan di folder di dalam folderwp-content/themes/.

Di folderwp-content/themes/, buat folder mentah dan beri keunggulanmy-theme. Folder yang Anda kerjakan tersebut haruslah punya nama yang unik, deskriptif, dan pendek sehingga memudahkan pencarian.

Catatan: Stempel folder tematidak bolehmemuat kredit maupun spasi. Nama folder lakukan tema Anda tidak boleh selevel dengan stempel folder cak bagi tema lainnya. Sekiranya ingin membagikan tema, pastikan tema lain dengan nama yang ekuivalen belum diupload keWordPress.org Theme Directory.

Tema WordPressbisadibuat hanya dengan dua file – index.php da style.css – dan Wordress akan menggunakan kedua file ini bakal mengutarakan setiap halaman dan post di situs Anda.

Biasanya Anda ingin membuat layout untuk per post, pekarangan, dan episode lainnya pecah website Anda. Ada file sendiri nan diberikan plong tiap bagian pecah website Ia yang berfungsi bagi menggudangkan HTML dan PHP yang hanya berperan buat bagian tersebut – tiap file disebut ‘template’.

Jika Ia menunggangi varietas custom post, maka Sira boleh takhlik template yang berperan hanya cak bagi post berasal jenis tersebut. Apabila Anda ingin post berusul kategori yang partikular diubah dengan kecondongan farik, Anda dapat melakukannya menggunakan statementif…then…di dalam loop.

Tiap file template harus menggunakan nama yang moralistis sebagaimana telah ditetapkan oleh WordPress.

Beberapa file template di luarindex.php:

  • header.php– memuat HTML apa pun yang ada di atas jerambah Beliau, berangkat bersumber<!DOCTYPE html>b
  • single.php– digunakan bagi menampilkan suatuPostdari blog Anda
  • page.php
    – digunakan bikin menampilkan satuPagedari blog Anda
  • commens.php– buat menampikan komentar dan text box komentar
  • footer.php– memuat HTML apa pun yang ada di bawah halaman Beliau, terdaftar</html>

Jika ingin mengaram daftar lengkap template, kunjungihandbook WordPress Theme Development.

Setelah membuat folder untuk menyimpan tema, Anda perlu takhlik file template sumber akar.

Awalan 2 – Membuat File Template dan CSS Stylesheet

Di foldermy-theme, bikin file PHP di dasar ini:

  • header.php
  • index.php
  • footer.php
  • functions.php
  • sidebar.php
  • single.php
  • page.php

Selain file PHP, untuk file CSS plonco dan beri labelstyle.css(nama untuk stylesheet utama haruslah style.css).

Buat file tema WordPress

Awalan mula-mula sesudah semua file tersebut dibuat adalah menambahkan sejumlah manifesto kestyle.cssyang akan dibaca dan ditampilkan WordPress di control panel admin.

Siaran tersebut harus ditulis sebagai multi-line CSS comment, masing-masing header di barisnya seorang, dimulai dengan header keyword.

Terserah banyak header keyword yang tersedia untuk Beliau keefektifan membuat informasi, seperti author (nama Dia), author website, deskripsi tema, nama tema, versi tema, dan lain-enggak. Kunjungi halamanWordPress Codex – File Headerlakukan mendapatkan daftar header keyword eksemplar.

Format penulisan header yaituKeyword: Information

/* Theme Name: My Theme Author: Hostinger Author Tembuni: http://www.hostinger.com/tutorials Description: My first responsive HTML5 theme version: 1.0 License: GNU General Public License v3 or later License Tembuni: http://www.gnu.org/licenses/gpl-3.0.html */

Coretan: Baris ketujuh dan kedelapan hanya dibutuhkan seandainya Sira ingin membagikan tema di WordPress.org. Jika Anda hendak menggunakan tema di website koteng, maka lewati dua baris tersebut dan tutup bagian comment.

Saat ini, tema Beliau telah dapat dilihat di control panel admin bikin bagian tema. Anda akan meluluk gambar kotak berwarna masif dan abu nan harus diberi stempel centang. Di gambar boks ini terserah
My Themenan tertulis di bawahnya. Pasca- tema Anda selesai dibuat, cak bagi screenshot untuk ditampilkan di sini.

Tema baru di admin area WordPress

Apabila Anda mengatifkan temanya sekarang, maka Anda akan melihat homepage yang kosong sebagaiamaindex.phpAnda kosong dan tak termuat template.

Tambahkan jejer kosongsehabispenutupan comment*/di baris 10.

Lega baris berikutnya, di bawah larik kosong yang mentah (baris 11 dari file tersebut), tulislah:

* {   box-sizing: border-box;  }  body {    background-color: #f9f9f9;    font-family: Helvetica; }

Entry mula-mula merupakan babak terdepan dari responsive styling.*merupakan wildcard dan sesuai dengan setiap single class yang ditemukan di tindasan HTML. Tanda medalion tersebut menyatakan bahawa lebar dan tinggi akhir dari tiap item di jerambah tersebut harusmenyertakankonten, padding, dan border. Jika Anda tidak mengatur ini dan memiliki dua box dengan dempak 50% yang letaknya berdempetan dengan padding atau border apa lagi, maka kedua box tersebut nantinya tak akan bersisian karena ukuran sebenarnya lebih dari 100%. Box lebar 100% dengan padding 1% sesungguhnya memiliki ukuran bogok 102%, seperti mana padding 1% ditambahkan ke sisi kidal dan kanan. Rule ini secara efektif menambahkan padding ke kerumahtanggaan box alih-alih di luar.

Entry kedua hanya memungkiri rona kalis yang menjadi warna latar belakang sehingga kami bisa dengan cepat mencerna apakah stylestheet sedang digunakan. Kami juga mengatur default font yang akan digunakan di tema kami.

Langkah 3 – Sebelum Start Takhlik Tema WordPress

Sebelum mulai membuat layout tema WordPress, tambahkan beberapa kode ke bineka file sebagai titik awalnya. Langkah-langkah di asal ini tidak diwajibkan tetapi sangat disarankan.

Langkah-langkah di sumber akar ini lagi memuat penjelasan pendek sehingga Anda kemudian bisa membuat layout tema WordPress yang sesungguhnya.

Mula-mula-tama, kami akan mengegolkan file CSS nan diberi namanormalize.css. Setiap browser memiliki pengaturan nan berbeda untuk hal-hal sama dengan margin halaman dan padding.Normalize.csssecara eksplisit mengatur sejumlah atribut guna memastikan bahwa semua browser menampilkan halaman Kamu yang sama persis. Jika Anda enggak memperalat stylesheet untuk mengatur default, kebobrokan yang paling umum terjadi saat Anda mengepas takhlik main header mulai berpunca penggalan paling kiri di halaman Anda yaitu adanyablank spacedi atas header.

functions.php

Bukafunctions.phpdan tambahkan kode di bawah ini.

<?php // This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we // use an online version of the css file. function add_normalize_CSS() {    wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"); }

Kemudian, aktifkan widget sidebar. Jika Anda tidak mengegolkan kode ini, maka tautan menu widget tidak akan unjuk di control panel admin dan kesannya Anda enggak dapat menambahkan widget segala pun. Difunctions.php, di radiks guna sebelumnya, tambahkan kode di asal ini:

// Register a new sidebar simply named 'sidebar' function add_widget_Support() {                 register_sidebar( array(                                 'name'         => 'Sidebar',                                 'id'           => 'sidebar',                                 'after_widget' => '<div>',                                 'before_title' => '<h2>',                                 'after_title'  => '</h2>',                 ) ); } // Hook the widget initation and run our function add_action( 'widgets_init', 'add_Widget_Support' );

Kita teradat mendaftarkan custom menu navigasi agar bisa menggunakan fiturAppearance -> Menudi panel admin. Di asal kode sebelumnya tambahkan:

// Register a new navigation menu function add_Main_Nav() {   register_nav_menu('header-menu',__( 'Header Menu' )); } // Hook to the init action hook, run our navigation menu function add_action( 'init', 'add_Main_Nav' );

Simpanfunctions.phpdan upload ke direktori tema Anda.

sidebar.php

Buka filesidebar.phpdan pun kode di radiks ini. Momenget_sidebar()diaktifkan, sidebar dan widget akan muncul di tema Anda.

<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>   <aside id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">     <?php dynamic_sidebar( 'sidebar' ); ?>   </aside> <?php endif; ?>

Jejer permulaan menginformasikan WordPress bahwa tidak suka-suka widget yang diaktifkan, sidebar HTML pun tidak ditampilkan. Baris kedua mengelola atribut dari atom yang memuat widget tersebut. HTML5 meluangkan elemen ‘aside’ lakukan sidebar. Baris ketiga adalah fungsi WordPress nan mencadangkan widget. Baris terakhir menutup awal statementif.

Simpan dan uploadsidebar.phpke direktori tema Anda.

Agar navigasi antara post dan halaman lebih mudah dijalankan, beber control panel admin dan tambahkan widgetPagesdanRecent Posts
ke sidebar.

Langkah 4 – Membuat Layout dengan Template

header.php

header.phpakan membuat penggalan sediakala dari dokumen Anda, nan dimulai dari deklarasiDOCTYPE.

Semua sertifikat HTML harus diawali dengan kenyataanDOCTYPE, nan akan menginformasikan web browser Beliau cara pertal surat tersebut. Doctype HTML5 hanyalahhtml. Tag pembuka<html>mengharuskan atribut bahasa, dan WordPress menyempatkan faedah bikin memasukkan kode bahasa yang benar untuk bahasa yang Sira memilah-milah sepanjang proses instalasi berlangsung –language_attribute().

Di kolom kepala karangan, gunakan banjar kode yang menampilkan merek situs Anda, diikuti dengan statement shorthandif…then…lakukan menampilkan tagline website Anda ATAU judul dari pekarangan ataupun post terkini yang sedang Sira lihat.

Karakter ? ialah operator kondisional PHP yang diberi nama ternary teknikus. Pada baris kode ini,is_front_page()merupakan faedah WordPress nan menandingi

TRUE

jika mengaram halaman depan, alias
FALSE
jika mengintai post atau pekarangan mana lagi. Fungsi sebelum tanda titik dua digunakan takdirnya
TRUE
dikembalikan, dan fungsi sesudah label bintik digunakan seandainya
FALSE
dikembalikan.



Sebagai halnya yang akan Kamu tatap di bawah ini, fungsibloginfo()digunakan berkali-mana tahu dengan parameter yang berlainan untuk memperoleh kabar yang berbeda lagi pecah database WordPress. Sebelum tag<head>ditutup dengan</head>, masukkan action hookwp_head()untuk memastikan maslahat yang terlampir sudah berjalan.

Manfaatbody_class()menawarkan classes CSS standar ke body sebagaimana mutakadim diatur oleh WordPress. Baris terakhir memperbolehkan menu navigasi untuk ditampilkan jika satu CSS class telah dibuat di control panel admin.header.phpakhir akan terlihat sama dengan ini:

<!DOCTYPE html> <html <?php languag_attributes(); ?> <head>   <title><?php bloginfo('name'); ?> &raquo; <?php is_front_page() blogingo('description') : wp_title( ); ?></title>   <meta charset="<?php bloginfo( 'charset' ); ?>">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylsheet" href="<?php bloginfo('stylesheet_url'); ?>">   <?php wp_head(); ?> </head> <body <?php body_class(); ?>>   <header class=my-cap">   <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a></h1> </header> <?php wp_nav_menu( array( 'header-menu' => 'header-menu' ) ); ?>

Jika Anda ingin menggunakan logo sebagai header, maka ganti<?php bloginfo(‘name’); ?>dengan kode buram di n domestik tag<header>.

Simpanheader.phpdan upload ke folder tema Beliau.

index.php

index.phpmembentuk beranda (homepage), dan akan digunakan bak layout default jika template yang spesifik (misalnya,single.php, page.php) enggak ditemukan.

Loop WordPress akan memunculkan daftar post dan excerpt dengan template tag yang makin banyak. Kami juga akan menunggangi elemen semantik HTML 5<section>, <main>, <header>, dan<article>.Beberapa elemen kami mempunyai class, dan class tersebut akan ditulis saat kami mendapatkan filestyle.css.

        <?php
        
          get_header();
        
        
          ?>
        <main
        class=
          "wrap"
        >   <section
        class=
          "content-area content-thin"
        >
        <?php
        
          if
          ( have_posts() ) :
          while
          ( have_posts() ) : the_post();
        
        
          ?>       <article
          class=
            "article-loop"
          >         <header>           <h2><a
          href=
            "<?php
              the_permalink();
            
            ?>"
          
          title=
            "<?php
              the_title_attribute();
            
            ?>"
          ><?php
            the_title();
          
          ?></a></h2>           By: <?php
            the_author();
          
          ?>         </header>
          <?php
            the_excerpt();
          
          ?>       </article> <?php
            endwhile;
            else
            :
          
          ?>       <article>         <p>Sorry, no posts were found!</p>       </article> <?php
            endif;
          
          ?>    </section><?php
            get_sidebar();
          
          ?> </main> <?php
            get_footer();
          
          ?>
        
      

Loop diawali dengan<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
dan berakhir pada<?php endif; ?>.Di dalam loop, template tag berikut ini digunakan:

  • <?php the_permalink(); ?> –output URL nan benar dari post sesungguhnya.
  • <?php the_title_attribute(); ?> –output judul post dalam format yang aman lakukan atribute judul dari link.
  • <?php the_title(); ?>– output judul post.
  • <?php the_author(); ?>– output label author.
  • <?php the_excerpt(); ?>– output excerpt post, nan secara kodrati dibuat jika Beliau tidak menulis excerpt Anda sendiri.

Tag
<header></header>
dapat digunakan berulangulang di halaman mana juga dan tidak secara individual mengarah ke header halaman. “Bagian” dan “artikel”haruspunya elemen header di aman teks di dalam<h1>,<h2>, dan lain-laindigunakan. Seandainya “bagian” dan “kata sandang” tidak memiliki teks header, makatinggalkanhanya.

Simpanindex.phpdan upload ke direktori tema Ia. Jika saat ini Sira sedang membuka situs Anda, maka akan unjuk jerambah yang tampilannya biasa saja.

Tampilan yang sederhana dari tema WordPress yang baru saja dibuat

Di tab judul, Anda akan melihat nama website dan tagline. Di atas pekarangan terdapat kepala karangan website (atau etiket seandainya Anda menggunakannya). Pada post apa lagi akan muncul judul, author, dan excerpt. Meskipun tampilan pelataran tersebut tertentang baik-baik saja, Dia masih harus menudungi tag pembuka<body>dan<html
>difoother.php.

foother.php

footer.phpmewujudkan footer setiap halaman dan menutup tag HTML man saja yang mendelongop di file template. Dalam hal ini,<body>dan<html>masih terbuka mulai sejakheader.php.

Action hookwp_footer()juga harus diikutsertakan bagi memastikan kode akhir WordPress dan JavaScript ditambahkan ke halaman tersebut. Jikalau Engkau masuk (login) sebagai admin momen membuka berawak utama (homepage), post, atau halaman, maka Dia akan tatap kalau kantin admin tidak ada. Kode yang menampilkan bar admin terhubung (hook up) ke action hookwp_footer().

Kami juga menambahkan atom semantik HTML5 <footer></footer> kerjakan secara spesifik membuat footer.

<footer>      <p>Copyright
        &copy;
        2022</p>     </footer>
        <?php
        
          wp_footer();
        
        
          ?>
        </body> </html>

Simpanfooter.phpdan upload ke direktori tema Anda.

single.php

single.phpmembuat layout pron bila meluluk single post di website Anda.single.phpsangat berbeda berbungaindex.php.

Dalam kasus ini, kami bukan akan menambahkan sidebar ke post cuma untuk meng-highlight
perbedaaan plong layout.

Konten utama mencuil lebar halaman sesudah-sudahnya karena kita memberikan class content-full-width dari stylesheet. Tautan telah dihapus berpokok judul karena tidak diperlukan. Maslahat lakukan menampilkan post mumbung adalahthe_content():

        <?php
        
          get_header();
        
        
          ?>
        <main
        class=
          "wrap"
        >   <section
        class=
          "content-area content-full-width"
        >
        <?php
        
          if
          ( have_posts() ) :
          while
          ( have_posts() ) : the_post();
        
        
          ?>       <article
          class=
            "article-full"
          >         <header>           <h2><?php
            the_title();
          
          ?></h2>           By: <?php
            the_author();
          
          ?>         </header>        <?php
            the_content();
          
          ?>       </article> <?php
            endwhile;
            else
            :
          
          ?>       <article>        <p>Sorry, no post was found!</p>       </article> <?php
            endif;
          
          ?>   </section> </main> <?php
            get_footer();
          
          ?>
        
      

page.php

page.phpmembuat cara untuk mencadangkan jerambah dan farik dari index dan layout post.

Teristiadat diingat bahwa takdirnya template tidak terserah, maka templateindex.phpyang akan digunakan. Jika Anda tidak membuatpage.php, maka layout yang digunakan enggak sama dengan layout untukposts.php.

Mudah-mudahan perbedaan bertambah jelas kelihatan, sekali lagi kami akan menambahkan sidebar ke layout, dan atur kiranya konten halaman bertakaran 70% berpangkal lebar halaman.

        <?php
        
          get_header();
        
        
          ?>
        <main
        class=
          "wrap"
        >   <section
        class=
          "content-area content-thin"
        >
        <?php
        
          if
          ( have_posts() ) :
          while
          ( have_posts() ) : the_post();
        
        
          ?>       <article
          class=
            "article-full"
          >        <header>          <h2><?php
            the_title();
          
          ?></h2>          By: <?php
            the_author();
          
          ?>        </header>        <?php
            the_content();
          
          ?>       </article> <?php
            endwhile;
            else
            :
          
          ?>       <article>         <p>Sorry, no page was found!</p>       </article> <?php
            endif;
          
          ?
          </section><?php
            get_sidebar();
          
          ?> </main> <?php
            get_footer();
          
          ?>
        
      

Simpanpage.phpdan upload ke direktori tema Beliau.

style.css

Tambahkan kode berikut ini ke putaran dasar stylesheet. Anda akan meluluk perubahan plong berbagai box yang nantinya memiliki latar pinggul putih dan border biru, sehingga Anda bisa mengandaikan berapa banyak ira yang sebenarnya dipakai oleh setiap box.

/* Theme Name: My Theme1 Author: Your Name Author Saudara: http://www.yourwebsite.com Description: My first responsive HTML5 theme Version: 1.0 License: GNU General Public License v3 or later License Tali pusar: http://www.gnu.org/licenses/gpl-3.0.html */
        *
        {
        box-sizing:
        border-box;  }
        body
        {
        background-color:
        #f9f9f9;
        font-family:
        Helvetica; }
        .my-logo,
        footer
        {
        width:
        100%
        ;
        padding-left:
        1%
        ;
        margin-bottom:
        8px
        ;
        background-color:
        #78baff;
        border:
        1px
        
        solid
        #78baff; }
        body
        >
        header
        >
        h1
        >
        a
        {
        color:
        #ffffff;
        font-weight:
        400; }
        article
        >
        header
        {  }
        footer
        {
        margin-top:
        4px
        ; }
        a
        {
        text-decoration:
        none; }
        /*
        'Margin: 0 auto' centers block content on the page
        */
          .wrap
          {
          width:
          99%
          ;
          margin:
          0
          auto; }
          .content-area
          {
          display:
          inline-block; }
          .content-thin
          {
          width:
          70%
          ; }
          .content-area,
          .primary-sidebar
          {
          display:
          inline-block; }
          .primary-sidebar
          {
          width:
          25%
          ;
          padding:
          1%
          ;
          vertical-align:
          top;
          background-color:
          #ececec; }
          .article-loop
          {
          width:
          45%
          ;
          text-align:
          left;
          margin:
          5px
          ;
          padding:
          10px
          ; }
          .article-full
          {
          width:
          99%
          ;
          padding:
          1%
          ; }
          .article-loop,
          .article-full
          {
          display:
          inline-block;
          vertical-align:
          top;
          background-color:
          #FFF;
          border-radius:
          4px
          ;
          margin-bottom:
          4px
          ; }
        
      

Simpanstyle.csdan uppload ke direktori tema Ia.

Setelah membentuk template dasar dan stylesheet, Anda bisa dengan mudah melakukan navigasi melalui post dan pelataran. Tema nan baru saja dibuat akan tampak seperti mana ini.

Tutorial Tema WordPress - Tampilan Akhir Tema

Menggunakan Wahana Query

Karena layout radiks kami punya 2 inline box di jerambah depan, maka kami dapat dengan mudah menyangkal cara inline box tersebut berkreasi saat ventilasi browser berukuran terlampau kecil untuk menampilkan teks.

Pada kursus cara membuat tema WordPress ini, kami akan mengubah lebar post di dalam daftar post ketika ukuran perputaran udara broswer di sumber akar 800px. Alih-alih memiliki 2 post yang saling bersisian, tiap post akan n kepunyaan barisnya sendiri. Kerjakan itu, kami harus menambahkan media query. Jika Ia membutuhkan refresher di media query, mari baca pun putaranApa Itu Desain Responsif?di les ini sebelum lanjut ke langkah berikutnya.

Momen menulis (write) media query, Dia dapat menuliskannya di mana sekali lagi di stylesheet. Semua media query boleh diposisikan di penggalan bawah stylesheet, atau menuliskan kendaraan query yang tunggal bagi item yang spesifik pula tepat di pangkal definisi steril. Ini sekadar masalah pilihan yang Anda anggap paling masuk akal untuk diikuti.

Pertama-tama, kami akan menuliskan media query yang memengaruhi class.article-loop. Class ini memiliki lebar 49% secara kriteria. Kami akan menuliskan media query tepat di bawah definisi asli. Media query tersebut menyatakan bahwa seandainya lebar tingkapan window kurang dari 800px, maka class.article-loopsepatutnya menggunakan 99% ruang yang terhidang.

Kemudian kami juga akan menuliskan sarana query yang menyatakan bahwa apabila bogok tingkap browser minus dari 600px, maka geser sidebar yang suka-suka di asal konten terdepan dan lebarkan baik konten utama maupun sidebar sampai 100%. Layout inilah nan layak bakal digunakan di perangkat mobile yang memiliki keterbatasan ruang (space).

Masih distyle.css, cari .article-loop di baris 73. Di dasar class.article-loop,tulislah kode berikut ini:

@media screen and (max-width: 800px) {   .article-loop {     width: 99%;   } }

Saf mula-mula menginformasikan bahwa alat angkut query hanya boleh membagi perubahan lega layar (tidak dalam mode pratinjau cetak) dan sekali lagi tingkapan browser yang lebarnya 800px maupun kurang dari 800px. Simpan dan upploadstyle.csske direktori tema Anda. Buka pekarangan berawak utama (homepage) website Anda. Silih format jendela browser Anda. Karena lebar tingkapan browser melebihi 800px, maka Anda akan mengawasi box buat setiap post yang lebarnya diubah. Lalu, jatuh satu box ke dasar box lainnya.

Kalau Sira mengurangi lebar jendela browser hingga sekecil kelihatannya, maka semua teks akan menjadi sulit dibaca karena jarak dan spasinya terlampau sempit. Namun, pustaka tersebut tak akan hilang begitu tetapi dari jib. Apabila lebar telah diatur ke internal ukuran piksel dan bukannya persentase, maka lekas pasca- dimensi window mengecil, sidebar akan hilang dan membutuhkan adanya scroll horizontal.

Sarana query berikutnya yang akan ditambahkan serupa dengan media query di atas. Kendaraan query ini mengatur baik konten penting maupun sidebar semoga mengambil 100% dari ruang yang tersedia, dan sidebar tersebut akan ada di bawah konten utama.

CATATAN: Karena media query ini memengaruhi bermacam rupa class nan lokasinya berbeda di dalam stylesheet, maka sebaiknya diletakkan di radiks stylesheet.

@media screen and (max-width: 400px) {   .content-area,   .primary-sidebar {     width: 100%;   } }

Simpanstyle.cssdan upload ke direktori tema Sira. Kembali ke halaman beranda penting (homepage) dan atur ulang uuran lubang angin browser hingga pesek konten mencapai 100% dan sidebar berbenda di dasar konten penting.


Dengan memperalat sidebar, klik jerambah nan ada dan Ia akan lihat bahwa sidebar juga ada di bawah konten halamannya, dan semuanya berfungsi dengan baik.

Mengetahui Template Tag WordPress dan Action Hook

Agar Anda dapat sesudah-sudahnya mengintegrasikan tema dengan WordPress, gunakantemplate tagsdanaction hooks.Namun, terserah baiknya untuk memahami perbedaan template tags dan action hooks bahkan silam.

Template Tags

Template tags merupakan fungsi PHP yang disediakan oleh WordPress hendaknya mudah menjaringkan file template (sepertiheader.php) yang dari dari tema ke dalam file lain alias kerjakan menyorongkan butir-butir berpunca database.

Umpama contoh, untuk menganjurkan footer di pekarangan beranda dan bukan di pekarangan tak, tambahkanget_footer()di sumber akarof index.phpdan bukan di dalampage.php.

Dua daftar berikut ini memuat informasi tentang template tag yang terdahulu sehingga kamu bisa memahami tag mana saja yang tersuguh.

Template tags untuk memasukkan file template:

  • get_header()– mengegolkan templateheader.php.
  • get_sidebar()
    – memasukkan templatesidebar.php.
  • get_footer()
    – memasukkan templatefooter.php.
  • get_search_form()– memasukkan templatesearchform.php.

Template tags untuk menyampaikan informasi semenjak database

CATATAN:Beberapa template tag harus digunakan dalam loop. Loop akan dijelaskan kemudian di tutorial ini, dan hanya berupa kode nan menerima post yang diminta.

  • bloginfo() –mencadangkan informasi yang diminta sebagai parameter, merupakan bloginfo(“name”) menunjukkan keunggulan website Anda sebagai halnya nan sudah lalu dibuat di Control Panel Admin (lihat daftar parameter).
  • single_post_title()– menampilkan judul post yang hijau saja dilihat, digunakan intern single.php.
  • the_auther()– menampilkan author dari post nan baru cuma dilihat.
  • the_content()– menampilkan teks terdepan berusul post atau halaman.
  • the_excerpt()– excerpt dari post alias halaman.

Daftar lengkap adapun template tags WordPress boleh dibaca di sini.

Action hooks

Action hooksialah khasiat PHP yang disediakan makanya WordPress. Biasanya ada fungsi tak yang sekali lagi terpatok pada action hooks. Sejumlah hook enggak memiliki arti yang melekat secara tolok dan tersedia lakukan digunakan oleh plugin. Action hook memperbolehkan plugin untuk melekatkan atau melampirkan fungsinya sendiri dan menjalankan fungsi tersebut di beberapa titik bilamana sebuah halaman sedang loading.

Pada template header tema Anda, action hookwp_head()diaktifkan bikin memasukkan HTML header WordPress standar ke dalam tag<head></head>. Action hook tersebut mempunyai manfaat inti WordPress yang bisa digunakan untuk menambahkan HTML ke halaman dan memungkinkan setiap kebaikan mana pun nan dilampirkan atau disertakan oleh plugin kerjakan dijalankan.

Di bagian footer tema, action hookwp_footer()diaktifkan untuk  memasukkan HTML default dan JavaScript, dan menjalankan fungsi barang apa kembali nan terlampir oleh plugin.

Jika Sira lain menggunakan action hook saat membuat tema WordPRess, maka kode inti yang penting akan hilang dan plugin tidak dapat menjalankan fungsinya dengan baik.

Sebagai contoh, tidak diaktifkkannya
wp_footer()di templatefooter.phpakan menciptakan menjadikan top admin kantin tidak muncul saat Anda log in andai admin. Kode inti WordPress nan mengakibatkan admin bar muncul terlampir di action hookwp_footer(), dan fungsi yang terlampir tersebut lain boleh berfungsi sekiranya action hook tidak suka-suka.

Bikin penjelasan lebih lengkap mengenai action hook, silakan baca Actions dan Action Hooks nan terdaftar di pelajaran cara membuat plugin WordPress.

Loop WordPress

Loop digunakan buat mencadangkan post. Loop dapat digunakan untuk menampilkan single post alias semua post Anda nan telah diterbitkan di single page. HTML yang Anda tulis di kerumahtanggaan loop akan digunakan kerjakan menampilkan setiap post nan diminta oleh loop. Kode akan terus looping setakat tiba di post terakhir.

Apabila ingin mencadangkan satu post, gunakan tag templatethe_content()di dalam loop untuk mempertunjukkan konten post tersebut. Bilamana cak hendak menampilkan daftar semua post nan telah diterbitkan, gunakanthe_excerpt()di dalam loop sehingga tidak keseluruhan isi post yang ditampilkan.

Loop merupakan statementif…then…nan multi-line shorthand dan terdiri atas catur baris kode. Leret pertamam mengindikasikan bahwa seandainya post ditemukan, selagi tersedia, maka gunakan kode di  bawah ini bagi mengutarakan post. Takdirnya post yang sesuai bukan ditemukan, maka Beliau dapat membuat referensi pengganti. WordPress default akan terlihat begitu juga ini, dan lajur yang diberi komentar adalah ajang di mana Anda menuliskan HTML dan template tags.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> // HTML and template tags here to define the layout, and what is shown from the post <?php endwhile; else : ?>   <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p> <?php endif; ?>

Konklusi

Kini Dia sudah tahu cara membuat tema WordPress responsive menggunakan HTML5!

Setelah memafhumi betul tentang template dan template tags, lihatlah daftar WordPress codex yang memuat template dan template tags, dan coba tambahkan putaran baru ke layout. Cobalah pula menyangkal CSS style dan lebar dan tatap bagaimana browser Sira merespons berbagai macam situasi. Ubah rule untuk alat angkut query dan lihatlah apakah ada rule yang lebih baik yang bisa dibuat.

Silakan baca pula tuntunan kami yang lain, cara membuat Child Theme WordPress.

Author

Ariata senang sekali menulis dan menerjemahkan, dan sekarang ini berkarya sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan laporan adapun website, WordPress, dan kejadian tercalit hosting lainnya kepada sidang pembaca.

Source: https://www.hostinger.co.id/tutorial/cara-membuat-tema-wordpress