Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Dimulai dengan WordPress: Mengedit Struktur Situs Anda

by
Read Time:12 minsLanguages:
This post is part of a series called Beginning With WordPress.
Beginning With WordPress: Editing the Look of Your Site With CSS
Customising WordPress Functionality With functions.php

Indonesian (Bahasa Indonesia) translation by Shylchemist (you can also view the original English article)

Jadi, Anda punya CSS untuk mempercepat, dan situs Anda sekarang harus setidaknya menjadi cara yang adil untuk menyesuaikan dengan skema warna dan mungkin bahkan beberapa font kustom untuk membuatnya benar-benar mulai merasa seperti itu banyak lebih banyak 'kamu' daripada itu. Namun, Anda berpikir Anda juga ingin membuat beberapa perubahan lain dan perubahan tersebut tidak terkait dengan gaya. Jadi kemungkinan Anda harus mulai mengedit beberapa hard-coded, struktur inbuilt, dan itu berarti mulai menggali file PHP dari situs Anda.

Oh, tapi sebelum kita lakukan, jika Anda mencari stylesheet yang saya janjikan minggu lalu yang menyelesaikan konversi Twenty Thirteen dari oranye menjadi biru: itu di sini - mungkin ada beberapa elemen tema yang mungkin saya lewatkan ketika Anda menavigasi , Saya tidak menyesuaikan setiap post format terakhir dan mungkin ada hal-hal lain yang tidak Anda temukan. Jadi, jika Anda benar-benar berencana menggunakan ini untuk situs langsung, Anda akan memiliki sedikit lebih banyak pekerjaan yang harus dilakukan. Tetapi setidaknya, Anda akan mendapatkan jalan yang adil ke dalam proses dan menyiapkan Anda untuk dapat mengelola penyesuaian lain yang mungkin Anda inginkan di jalur selanjutnya.

Anyway, kembali ke tutorial minggu ini!


Sebelum Kita Mulai, Anda perlu ...

  • Akses FTP ke situs Anda
  • Perangkat lunak pengedit teks Anda

Apa yang Akan Kita Lakukan

  • Mengedit footer WordPress default dengan tautan / konten khusus
  • Memindahkan navigasi utama ke sebelum header
  • Membuat deskripsi halaman menggunakan bidang khusus

Sebagai pengantar saya perlu menjelaskan sedikit lebih banyak tentang template dalam tema WordPress dan bagaimana mereka bekerja dalam konteks tema anak. Karena, Anda mungkin ingat bahwa, pada tahap ini tema kami tidak benar-benar menyertakan template PHP.

Mungkin aku terlalu terburu-buru. Anda mungkin tidak menyadari sistem templating, kan? Jadi, untuk penjelasan yang benar-benar lengkap, Anda bisa mulai di sini:

Referensi

Namun, untuk versi singkat ke titik, izinkan saya mengutip Codex karena saya tidak bisa mengatakannya sendiri dengan lebih baik:

Template adalah file yang mengontrol bagaimana situs WordPress Anda akan ditampilkan di Web. File-file ini menarik informasi dari database MySQL WordPress Anda dan menghasilkan kode HTML yang dikirim ke browser web. Melalui sistem Theme yang kuat, WordPress memungkinkan Anda untuk mendefinisikan sebagai beberapa atau banyak Template yang Anda suka semua di bawah satu Tema

Sekarang, jika Anda melihat tema Anda, Anda akan melihat sebenarnya tidak ada template di direktori tema Anda saat ini. Apakah Anda perlu saya untuk mengingatkan Anda mengapa?

1-bwwp_7-templates-on-server-a1-bwwp_7-templates-on-server-a1-bwwp_7-templates-on-server-a

Saya tidak berpikir demikian. Anda ingat bahwa tema kami adalah "child theme" dan karena itu, semua template untuk tema kami terselip di sana di direktori tema induk.

2-bwwp_7-templates-on-server-b2-bwwp_7-templates-on-server-b2-bwwp_7-templates-on-server-b

Jadi, pertanyaannya kemudian tetap, bagaimana kita mengakses dan mengedit file-file ini tanpa mempertaruhkan tema induk, haruskah pengembang tema memperbarui tema?

Aku senang kamu bertanya! Caranya mudah, kita cukup salin template yang ingin kita edit dari direktori induk ke dalam direktori tema anak kita. WordPress cukup pintar untuk mencari templat pertama di direktori tema anak kami dan jika tidak menemukan file yang diperlukan, maka secara otomatis akan melihat kembali ke induknya. Jadi, apa pun yang kami salin ke direktori tema anak akan menjadi prioritas.

Ok, itu latar belakangnya. Sekarang kita beralih ke hal-hal yang akan memungkinkan kita membuat perubahan struktural yang kita inginkan.


Membuat / Menyalin File di Child Theme Anda

Sebagai permulaan, ada lebih dari satu cara untuk mendapatkan salinan templat yang ingin kita edit dari tema induk ke tema anak.

Metode 1

Anda dapat drag dan drop dari Remote ke Lokal dan kembali ke Remote di klien FTP Anda.

Dalam FileZilla seret salinan templat yang Anda edit dari tema induk, ke desktop Anda (atau di mana pun di komputer Anda) lalu seret kembali ke server Anda ke child theme directory:

3-bwwp_7-drag-down-up3-bwwp_7-drag-down-up3-bwwp_7-drag-down-up

Ini tidak menghapus apa pun dari jarak jauh, cukup buat salinan di komputer lokal Anda yang kemudian Anda salin kembali ke mesin jarak jauh di lokasi yang berbeda.

Metode 2

Kami juga dapat mengatur bookmark untuk server FTP kami di Text Wrangler sehingga kami dapat menyimpan hingga lokasi alternatif (seperti tema anak) seperti ini:

  1. Di Textwrangler buka Text Wrangler » Setup
  2. Di Tab Bookmark tekan tanda + di kiri bawah untuk membuat bookmark baru
4-bwwp_7-bookmark-textwrangler-a4-bwwp_7-bookmark-textwrangler-a4-bwwp_7-bookmark-textwrangler-a

Isi bidang dengan data FTP Anda, kredensial yang sama yang Anda gunakan ketika kami mengatur FileZilla.

5-bwwp_7-bookmark-textwrangler-b5-bwwp_7-bookmark-textwrangler-b5-bwwp_7-bookmark-textwrangler-b

Dengan pengaturan itu, ketika Anda berada di FileZilla dan ingin menyalin file, Anda dapat mengklik kanan file di server Anda (dalam kasus kami, footer.php) dan pilih edit sehingga terbuka di Textwrangler.

Kemudian, di Text Wrangler File menu, pilih Save a Copy to FTP/SFTP server. (Jika Anda memilih FTP dan program memberitahu Anda Anda harus mengizinkan pengecualian keamanan karena Anda menggunakan pilih izinkan setiap waktu dan lanjutkan untuk menyimpan file - Anda hanya perlu melakukan ini sekali).

6-bwwp_7-bookmark-textwrangler-c6-bwwp_7-bookmark-textwrangler-c6-bwwp_7-bookmark-textwrangler-c

Di jendela yang terbuka berikutnya, Anda kemudian dapat menavigasi ke direktori tema anak Anda dan menyimpan footer.php yang baru ke tema anak Anda.

7-bwwp_7-bookmark-textwrangler-d7-bwwp_7-bookmark-textwrangler-d7-bwwp_7-bookmark-textwrangler-d

Ini juga memindahkan file dari pemutusan, dan kembali lagi ke lokasi baru di server itu, itu sedikit lebih rumit tapi saya pikir itu membuat proses lebih bersih karena Anda tidak berakhir dengan file yatim pada desktop Anda. Bagaimanapun, terlepas dari bagaimana Anda memilih untuk melakukannya, kita perlu memiliki salinan footer.php (atau file apa pun yang kita edit) dalam tema anak kami sehingga kami dapat melakukan perubahan!


Mengedit Footer untuk Mengubah Detail Info Situs

Perubahan pertama yang biasanya saya minta untuk dilakukan setiap kali trainee saya mendapatkan bagian kursus ini adalah bagaimana mengubah Footer Twenty Thirteen default.

8-bwwp_7-site-info8-bwwp_7-site-info8-bwwp_7-site-info

Kebanyakan mereka ingin menambahkan pemberitahuan hak cipta, atau mereka mungkin ingin mengubahnya sama sekali, mungkin tidak akan mengejutkan Anda untuk mengetahui bahwa mengotak-atik bagian ini dari situs web Anda dapat dilakukan di footer template (footer.php) - jadi, berdasarkan informasi di bagian atas, buka salinan tema anak Anda dari footer.php di Editor Teks Anda.

Jadi, sebelum kita mengedit apa pun, mari kita memecah apa yang kita lihat.

9-bwwp_7-footer-php9-bwwp_7-footer-php9-bwwp_7-footer-php

Di bagian paling atas halaman, kita akan melihat tag kode yang terlihat seperti ini. Ini menunjukkan bahwa teks yang diikuti adalah PHP, bahasa yang ditafsirkan dan dieksekusi oleh server sebelum halaman disajikan kembali ke klien (browser) - itulah hal cerdas teknologi web, kita tidak lagi harus menggunakan file bodoh yang duduk statis di server hanya disajikan sebagai tanggapan atas permintaan browser. Server-side scripting, yang merupakan PHP, memungkinkan untuk lebih banyak lagi teknologi pintar dan dinamis yang mendorong banyak produk berbasis web saat ini (ada bahasa lain juga, tetapi WordPress ditulis dalam PHP dan dengan demikian fokus kami di sini ).

PHP bukan HTML, tetapi berfungsi di dalam dan di sekitar HTML karena itulah yang dibaca browser. Browser tidak dapat membaca atau menafsirkan PHP, yang semuanya terjadi di server (dan mengapa ketika Anda memesan hosting Anda kembali di episode 2 Anda harus memastikan host Anda menawarkan server dengan PHP yang, tentu saja, sebagian besar dari mereka melakukan).

Dalam hal apapun, membaca halaman Anda akan melihat hal-hal berikut:

  1. Tag PHP pembuka
  2. Komentar tentang template ini menunjukkan tempatnya di struktur situs secara keseluruhan (berisi konten footer, juga menutup div konten utama)
  3. Menutup tag PHP
  4. Beberapa tag HTML - dengan komentar yang membantu ...
  5. beberapa tag HTML - dengan komentar yang bermanfaat ... Penutupan Main </div>, <footer>bagian pembukaan
  6. PHP beberapa Tag e.g.<?php get_sidebar('main');? >
  7. Lebih penutupan HTML Tag

Kode diterbitkan benar-benar terlihat seperti ini:

10-bwwp_7-published-html10-bwwp_7-published-html10-bwwp_7-published-html

Anda akan melihat hanya ada HTML di halaman. Semua template berbagai bagian memiliki telah ditarik dalam dari salah satu tema (sidebar.php dan footer.php dll) atau dari WordPress itu sendiri wp_footer(); dan disusun ke dalam satu halaman HTML. Setiap halaman atau posting di situs Anda yang Anda kunjungi akan dikompilasi dengan cara yang sama dari bagian mana pun dari tema tersebut yang disebut sesuai dengan lokasi Anda di situs Anda.

Jika Anda berada di halaman rumah, itu mungkin menarik di home.php atau template front-page.php, jika Anda berada di blog itu kemungkinan akan menjadi template archive.php. Semua templat di tema Anda disatukan (oleh server), sesuai kebutuhan ketika klien (browser) membuat permintaan ke server untuk melihat situs Anda.

Jadi, untuk kembali ke apa yang ingin kita capai untuk latihan ini, kembalilah ke editor teks Anda dan mulailah untuk mendapatkan gagasan tentang bit kode templat footer yang mungkin ingin Anda edit.

Jika Anda melihat lebih dekat Anda akan melihat satu tag PHP panjang yang tampaknya berisi semua elemen yang mungkin ingin Anda ubah. Pertama kita dapat melihat bahwa seluruh cuplikan ini adalah tautan balik ke WordPress.org:

Sekarang, saat Anda merasa nyaman dengan kode semacam ini Anda dapat menyesuaikannya sesuai keinginan, Anda mungkin ingin menghapus bagian itu bersama-sama, dalam hal ini Anda dapat menghapus semuanya dari:

dan menghapus seluruh bagian itu dan situs Anda selesai dengan bagian bawah footer widgetised (sidebar.php).

Tetapi dalam hal ini yang ingin kami lakukan adalah mengubah URL ke situs web saya dan memberikan kredit untuk saya, sebagai pengembang, dan pemberitahuan hak cipta untuk mencegah orang menggunakan kembali konten saya.

Sesuatu seperti ini "Dibuat dengan penuh cinta oleh The Web Princess untuk Situs Klien © 2013"

Pertama, kami mengubah referensi dalam cuplikan kode ini dari twentythirteen menjadi mytheme (nama tema kami) dan:

Kemudian kami mengubah URL dari wordpress.org menjadi thewebprincess.com - jadi tautan akan kembali ke halaman saya:

Kemudian kita akan mengubah judul tautan dari 'Semantic Personal Publishing Platform' menjadi 'Web Development dan WordPress Training' (ini adalah tautan kembali kepada saya, mari beri tahu Google apa yang dapat saya lakukan):

Kemudian kita mengubah teks 'Proudly Powered by' menjadi 'Lovingly Crafted by'

Kemudian kita mengubah kata 'WordPress' menjadi frase 'The Web Princess':

Akhirnya kami ingin menyesuaikannya dengan pemberitahuan hak cipta kami, menambahkan nama klien setelah tautan kami dan tag PHP untuk menampilkan tanggal, dan kami telah menggunakan PHP karena ini akan secara otomatis menunjukkan apa pun tahun ini!

Ini dia! Footer khusus baru untuk situs kami.

Ngomong-ngomong, itu adalah cara yang agak panjang lebar untuk mengatasinya. Dalam melakukannya, kami mempertahankan semua elemen yang memungkinkan untuk menginternasionalisasikan tema ini, yang, dalam skenario dunia nyata yang hanya mengutak-atiknya sendiri (alih-alih menyiapkan tema Anda untuk distribusi yang lebih luas), Anda bisa saja melewatkannya semua dan mengganti semua kode di atas dengan yang berikut:


Memindahkan Navigasi Utama ke Sebelum Gambar Header

Jadi, hal berikutnya yang akan kita lakukan adalah memindahkan navigasi utama dari rumah saat ini di bawah banner di atasnya. Kemudian kami akan membuat area navigasi baru di bawah spanduk. Anda tahu, hanya karena kami bisa.

Jadi kali ini Anda perlu menyalin header.php dari tema induk ke tema anak Anda dan buka versi anak di editor Anda.

Pilih kode dari awal:

Ini adalah salah satu hal keren tentang Twenty Thirteen, semua komentar hebat ini untuk membantu Anda menemukan di mana Anda berada. Perhatikan dan lakukan hal yang sama dalam tema Anda sendiri, sehingga orang-orang yang muncul di belakang Anda dapat menemukan jalan mereka di tema Anda.

12-bwwp_7-move-header12-bwwp_7-move-header12-bwwp_7-move-header

Memotong kode dan paste di atas baris <header class="homelink">. Pastikan Anda menyimpannya dalam<div>.

12-bwwp_7-move-header_212-bwwp_7-move-header_212-bwwp_7-move-header_2

Simpan file dan segarkan tampilan yang dipublikasikan dari situs Anda sehingga Anda dapat melihat perubahan Anda:

13-bwwp_7-move-header-213-bwwp_7-move-header-213-bwwp_7-move-header-2

Simpan file dan segarkan tampilan yang dipublikasikan dari situs Anda sehingga Anda dapat melihat perubahan Anda:... Jika kita memeriksanya di inspektur kita dapat melihat bahwa bagian header masih sama tingginya. Apa yang terjadi adalah gambar header dikaburkan oleh nav, jadi kita akan menggerakkan gambar ke bawah.

14-bwwp_7-move-header-314-bwwp_7-move-header-314-bwwp_7-move-header-3

Jadi, untuk melakukan ini kita akan men-tweak sedikit CSS. Dengan cara yang sama seperti yang kami lakukan di tutorial kami sebelumnya, periksa kode sampai Anda menemukan ini:

15-bwwp_7-move-header-415-bwwp_7-move-header-415-bwwp_7-move-header-4

Alasan kami menempatkan selektor tubuh dengan .site-header adalah untuk meningkatkan kekhususan CSS. Tanpa itu kita bisa menempatkan kode di stylesheet kami dan tidak akan melihat hasil yang kami inginkan karena CSS untuk .site-header diatur di tempat lain dalam tema dan itu mengambil prioritas (datang setelah stylesheet kami di kaskade). Penambahan tag body kami membuat CSS lebih spesifik dan berarti itu mengambil prioritas dan dengan demikian situs akan mencerminkan perubahan kami.

16-bwwp_7-move-header-5b16-bwwp_7-move-header-5b16-bwwp_7-move-header-5b

Simpan ke situs dan segarkan situs yang dipublikasikan!

16-bwwp_7-move-header-5c16-bwwp_7-move-header-5c16-bwwp_7-move-header-5c

Tampak Bagus!


Menambahkan Deskripsi Halaman ke Halaman Kami Template Menggunakan Bidang Kustom

Akhirnya, hal terakhir yang akan kita lakukan adalah mengedit template page.php kami untuk memungkinkan kami menambahkan bidang deskripsi halaman di bawah judul halaman. Kami akan melakukan ini menggunakan bidang khusus (lihat Codex untuk detail lebih lanjut tentang itu).

Kami akan mulai dengan menyetel bidang khusus kami di halaman Layanan kami.

Pertama Anda mungkin harus mengedit Screen Options untuk memastikan Anda memiliki akses ke panel Custom Fields, pastikan kotak Custom Fields dipilih:

17-bwwp_7-custom-fields17-bwwp_7-custom-fields17-bwwp_7-custom-fields

Ini membuka panel baru di bawah editor halaman. Klik Enter New untuk membuat bidang khusus baru dan masukkan 'page description' di bidang Nama dan masukkan deskripsi halaman Anda di Value box.

18-bwwp_7-custom-fields-218-bwwp_7-custom-fields-218-bwwp_7-custom-fields-2

Sekarang kita sudah selesai bahwa kita perlu menambahkan beberapa kode ke template halaman kita, jadi salin page.php dari tema induk ke direktori child theme kita dan buka childe theme page.php di editor kita. Kami menempatkan kode ini dalam template setelah level 1(<h1>) dan sebelum akhir header artikel.

19-bwwp_7-custom-fields-319-bwwp_7-custom-fields-319-bwwp_7-custom-fields-3

Kami mendapat kode yang kami gunakan untuk halaman ini dari halaman Codex di bidang khusus - lihat bagian Template Functions - kami cukup mengganti 'key' mereka dengan kami, yang merupakan 'page description'. Simpan dan unggah file Anda dan segarkan halaman yang diterbitkan:

20-bwwp_7-custom-fields-520-bwwp_7-custom-fields-520-bwwp_7-custom-fields-5

Di sana Anda memulai, awal dari mengedit theme templates.


Kesimpulan

Menemukan jalan di sekitar template tema bisa sedikit menakutkan, untungnya, dimulai dengan tema seperti Twenty Thirteen adalah awal yang sangat berguna karena seberapa bagus komentarnya di seluruh.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.