Wordpress

Puluh Puluh: Pambuka kanggo Tema WordPress Default Anyar

Twenty Twenty minangka tema WordPress standar anyar sing teka karo rilis paling anyar saka WordPress 5.3. Kaya sadurunge Twenty Nineteen, Twenty Twenty wis dirancang kanthi fokus khusus ing Gutenberg. Ana prabédan amba antarane loro, sanadyan: Puluh Puluh ora dibangun saka lemah munggah; iku dirancang kanggo tema sing wis ana saka komunitas WordPress.

Amarga kita seneng kabeh babagan WordPress, kita nliti tema Twenty Twenty sing anyar, ndeleng file function.php, stylesheet, lan template.

Sanajan Twenty Twenty adoh saka stabil - nalika nulis iki - kanthi akeh masalah sing isih durung dirampungake, dina iki kita bakal nuduhake pikirane pisanan babagan tema WordPress standar anyar.

Ayo nyilem menyang tema WordPress Twenty Twenty!

Pratinjau Puluh Puluh
Pratinjau tema WordPress Twenty Twenty (Sumber gambar: Nggawe Inti WordPress)

Intro Cepet menyang Tema Puluh Puluh

Twenty Twenty wis dibangun ing Chaplin, tema WordPress gratis dening Anders Norén sing uga Default Theme Design Lead of WordPress 5.3.

Chaplin kasedhiya kanggo diundhuh ing repositori WordPress.org lan, miturut Anders, wis dibangun karo Editor Blok ing pikiran:

Chaplin minangka tema WordPress sing dilengkapi fitur sing menehi kontrol lengkap babagan font lan warna HTML ing situs sampeyan. Dibangun saka wiwitan karo Blok Editor anyar lan nggawe gampang nggawe tata letak sing apik ing kiriman lan kaca.

Tema WordPress Chaplin
Tema WordPress Chaplin

Filosofi sing padha ana ing mburi Twenty Twenty: Keluwesan, kajelasan, lan gampang diwaca minangka tembung kunci fokus kanggo tema anyar.

Twenty Twenty dilengkapi tata letak kolom siji lan telung templat kirim / kaca, ngarahake kanggo menehi admin lan desainer WordPress kamardikan kanggo nggawe tata adat langsung ing Block Editor kanthi njupuk kauntungan saka alignment sudhut lan lengkap kanggo unsur blok kaya kolom, gambar, lan blok grup sing dikenalake karo Gutenberg 5.5.

Minangka Anders nerangake:

Twenty Twenty dirancang kanthi keluwesan ing inti. Yen sampeyan pengin nggunakake kanggo organisasi utawa bisnis, sampeyan bisa nggabungake kolom, grup, lan media kanthi alignment sing amba lan lengkap kanggo nggawe tata letak dinamis kanggo nuduhake layanan utawa produk sampeyan. Yen sampeyan pengin nggunakake kanggo blog tradisional, kolom isi tengah ndadekake iku sampurna kanggo sing uga.

Kajaba iku, Twenty Twenty dilengkapi typeface anyar: Inter. Iki minangka kulawarga font gratis lan open source sing dirancang dening Rasmus Andersson khusus kanggo maca teks campuran lan huruf cilik, utamane kanthi ukuran font cilik.

Intertypeface
Kulawarga Inter typeface

Inter menehi kapribaden sing luwih kuat kanggo header gedhe, nanging sampeyan bakal entuk paling akeh nalika nggunakake ukuran teks sing diganti, kaya sing ditampilake ing pratinjau tema saka kiriman blog WordPress.org:

rong puluh ing desktop
Twenty Twenty typography: impact lan readability

Luwih saka tema sing dilengkapi kanthi lengkap, Twenty Twenty minangka tema sing menehi tandha langkah anyar sing penting kanggo evolusi UI panyuntingan WordPress ing mangsa ngarep. Puluh Puluh ateges gumantung ing Editor Blok kanggo nyunting lan nyetel konten, lan ing Customizer Tema kanggo header, footer, lan kustomisasi tambahan.

Kanthi ujar kasebut, wektune kanggo nginstal tema WordPress iki lan mbukak.

carane kanggo nginstal twenty twenty

Tema standar sing bakal teka bakal ngetutake rencana rilis WordPress 5.3. Iki tegese, nalika nulis iki, Twenty Twenty isih durung kasedhiya kanggo diundhuh ing Direktori Tema WordPress.

Oalah, sampeyan bisa ndownload versi Twenty Twenty ing GitHub lan nginstal ing versi stabil WordPress saiki utawa njaluk nganggo WordPress 5.3. Repositori Github bakal dibuwang sawise tema digabung dadi inti. Kangge, sampeyan bisa uga pengin nyimpen tanggal ing ngisor iki saka jadwal rilis WordPress 5.3:

  • 23 September 2019: Beta 1
  • 30 September 2019: Beta 2
  • 7 Oktober 2019: Beta 3
  • 15 Oktober 2019: Ngeculake calon 1
  • 22 Oktober 2019: Ngeculake calon 2
  • 29 Oktober 2019: Ngeculake calon 3
  • 5 November 2019: Ngeculake calon 4 (yen perlu)
  • 12 November 2019: Tanggal target kanggo rilis WordPress 5.3.

Kanggo miwiti karo Twenty Twenty, tindakake langkah ing ngisor iki:

  1. Entuk paket zip saka GitHub.
  2. Unggah file zip menyang instalasi pangembangan sampeyan ing dashboard WordPress utawa liwat SFTP.
  3. Nelusur menyang Panampilan → Tema lan klik ing Aktifake tombol ing gambar pratinjau tema.
  4. menyang Panampilan → Ngatur kanggo ngatur Puluh Puluh.

Lan iku! Sampeyan saiki bisa miwiti tes ing situs web pementasan utawa ing lingkungan lokal sampeyan.

penting

Twenty Twenty saiki lagi dikembangake lan akeh masalah sing durung dirampungake. Sampeyan ora kudu nggunakake ing produksi.

Puluh Puluh: Cithakan jembaré lengkap
Masalah mbukak ing GitHub

Saiki sampeyan wis siyap, ayo nerusake lan nyilem ing Rong Puluh Puluh Tema WordPress.

Tes tema WordPress kanthi gampang sadurunge nggawe produksi nganggo situs pementasan siji-klik. Coba Behmaster gratis.

“}” data-sheets-userformat='{“2″:6659,”3”:{“1″:0},”4”:{“1″:2,”2″:16777215},”12″:0,”14”:{“1″:2,”2″:0},”15″:”Roboto, RobotoDraft, Helvetica, Arial, sans-serif”}’>

Tes tema WordPress kanthi gampang sadurunge nggawe produksi nganggo situs pementasan siji-klik. Coba Behmaster gratis.

Fitur Tema Puluh Puluh

Twenty Twenty dudu tema WordPress kanthi fitur lengkap, nanging tema sing dipotong lan minimal sing tujuane menehi pangembang lan admin situs kebebasan nggawe tata letak konten khusus kanggo kiriman lan kaca. Kaya Twenty Nineteen, Twenty Twenty wis dibangun kanggo Gutenberg lan biasane gumantung marang siklus urip Gutenberg (liyane babagan topik iki ing video Matt Mullenweg ing WCEU 2019).

Tema ndhukung sawetara fitur tema kayata jembar konten (580), pranala feed otomatis, gambar cilik kirim, tag judhul, lan sawetara unsur HTML5 (formulir telusuran, formulir komentar, dhaptar komentar, galeri, lan katrangan).

Fitur liyane nambah opsi menyang Customizer Tema. Iki kalebu latar mburi khusus lan logo khusus. Cuplikan kode ing ngisor iki nuduhake fitur-fitur kasebut diaktifake ing file fungsi tema:

// Custom background color
add_theme_support(
	'custom-background',
	array(
		'default-color'	=> 'F5EFE0'
	)
);
// Custom logo
add_theme_support(
	'custom-logo',
	array(
		'height'      => 240,
		'width'       => 320,
		'flex-height' => true,
		'flex-width'  => true,
		'header-text' => array( 'site-title', 'site-description' ),
	)
);
Theme Customizer ing Twenty Twenty
Theme Customizer ing Twenty Twenty

Twenty Twenty uga ndhukung sawetara fitur khusus Gutenberg. Pisanan, tema ndhukung alignments amba lan lengkap-jembaré:

// Add support for full and wide align images.
add_theme_support( 'align-wide' );

The palet warna editor diaktifake yen pangguna nyetel werna aksen ing Customizer (diaktifake kanthi gawan):

// If we have accent colors, add them to the block editor palette
if ( $editor_color_palette ) {
	add_theme_support( 'editor-color-palette', $editor_color_palette );
}
Kustomisasi warna ing Twenty Twenty
Kustomisasi warna ing Twenty Twenty

Tema Twenty Twenty dilengkapi papat ukuran font editor kasedhiya ing Editor Blok:

// Gutenberg Font Sizes
add_theme_support( 'editor-font-sizes', array(
	array(
		'name' 		=> _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 16,
		'slug' 		=> 'small',
	),
	array(
		'name' 		=> _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 18,
		'slug' 		=> 'regular',
	),
	array(
		'name' 		=> _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 24,
		'slug' 		=> 'large',
	),
	array(
		'name' 		=> _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
		'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
		'size' 		=> 32,
		'slug' 		=> 'larger',
	),
) );
Ukuran font ing setelan teks blok editor
Ukuran font ing setelan teks blok editor

Lan mekaten. Tema kasebut uga sithik banget ing fungsionalitas, nanging gampang ditambah karo tema bocah, lan kita bakal nyilem ing sawetara menit.

Carane Ngatur Penampilan Puluh Puluh

Twenty Twenty gratis saka lonceng lan whistles, nanging menehi keluwesan sing apik nalika digunakake bebarengan karo Gutenberg (utawa karo tukang kaca sing apik).

Kustomisasi Tema Puluh Puluh

The Identitas Situs nangani judhul situs lan tagline, logo, lan lambang. Sampeyan bisa ngaktifake / mateni kabeh unsur kasebut ing Identitas Situs bagean saka Customizer:

Identitas Situs ing setelan Customizer
Identitas Situs ing setelan Customizer

The Customizer kang Cithakan tutup bagean nangani setelan pangaturan dhewe kanggo Cithakan tutup Cithakan kaca. Ing kana, sampeyan bakal nemokake:

  • Pilihan kanggo ngaktifake efek paralaks ing gambar latar mburi (Fixed Background Image).
  • Pemilih warna kanggo nyetel warna latar mburi lan warna teks khusus kanggo overlay gambar sing ditampilake.
  • Panggeser kanggo ngontrol opacity overlay.
Bagean Cithakan Cover ing Customizer
Bagean Cithakan Cover ing Customizer

The Menu bagean menehi limang lokasi menu. Sampeyan bisa nyakup menu horisontal biasa ing header (Menu Horizontal Desktop) lan/utawa menu navigasi sing bisa diowahi (Desktop Expanded Menu). Ing Menu Ponsel iku menu tartamtu kanggo piranti seluler, lan Menu sikil lan Menu Sosial dumunung ing footer kaca.

Lokasi menu ing Puluh Puluh
Lokasi menu ing Puluh Puluh

Footer nangani lokasi Menu Footer lan Menu Sosial bebarengan karo rong area widget. Gambar ing ngisor iki nuduhake footer tema karo kabeh unsur ing panggonan:

footer Cithakan ing Twenty Twenty
footer Cithakan ing Twenty Twenty

Pungkasan, ing CSS tambahan bagean ngijini sampeyan kanggo kalebu gaya adat.

Cithakan Posting/Page Tunggal

Nalika nerangake kiriman lan tata letak kaca, sampeyan bisa milih saka telung template sing beda. Saliyane cithakan standar, Puluh Puluh menehi a Cithakan tutup lan Cithakan Full Jembar sampeyan bisa muter kanggo ngatur tampilan lan aran isi.

Cithakan Posting/Page Tunggal ing Twenty Twenty
Cithakan Posting/Page Tunggal ing Twenty Twenty

Editor Blok ing Twenty Twenty

Amarga pendekatan minimal, penampilan Twenty Twenty biasane gumantung ing Editor Blok. Kita nindakake tes ing Twenty Twenty karo Gutenberg versi 6.4.0. Versi iki nyedhiyakake akeh fitur anyar, tambahan, lan koreksi bug sing nambah pengalaman panyuntingan kanthi signifikan.

Tes tema WordPress kanthi gampang sadurunge nggawe produksi nganggo situs pementasan siji-klik. Coba Behmaster gratis.

“}” data-sheets-userformat='{“2″:6659,”3”:{“1″:0},”4”:{“1″:2,”2″:16777215},”12″:0,”14”:{“1″:2,”2″:0},”15″:”Roboto, RobotoDraft, Helvetica, Arial, sans-serif”}’>

Tes tema WordPress kanthi gampang sadurunge nggawe produksi nganggo situs pementasan siji-klik. Coba Behmaster gratis.

Sawetara blok migunani, utamane nalika nggawe situs web siji-halaman. Blok kaya Media & Teks lan Tutup wis apik lan saiki katon apik nalika nerangake produk lan/utawa portofolio profesional:

media lan teks
Blok Media & Teks (kebak karo keselarasan)

Nanging, amarga Gutenberg minangka proyek sing lagi ditindakake, sampeyan bisa uga pengin ndeleng sawetara plugin sing paling populer sing ngidini sampeyan nambah blok liyane menyang editor.

Mangkene dhaptar cepet plugin sing bisa dicoba:

  • Blok Gutenberg
  • CoBlocks
  • Tumpukan
  • Blok Atom.
  • Majeng Gutenberg

Kustomisasi Tema lan Editor Blok nindakake tugas sing apik nalika nerangake tampilan lan kustomisasi lay-out, nanging tema bocah bisa menehi kontrol sing luwih gedhe babagan tampilan lan rasa kaca sampeyan.

Cara Nggawe Tema Bocah kanggo Tema Puluh Puluh

Mbangun tema anak kanggo WordPress bisa nyenengake lan uga cara sing apik kanggo miwiti karir minangka pangembang tema WordPress lan Twenty Twenty bisa dadi tema wong tuwa sing apik nalika mbangun tema anak ing WordPress. Dadi, apa sampeyan ora nyoba? 😉

Yen sampeyan ora ngerti ngendi arep miwiti karo tema anak, priksa manawa mriksa pandhuan lengkap babagan Cara Nggawe Tema Bocah ing WordPress.

Saiki, ayo gawe tema anak pertama kanggo Twenty Twenty!

Nggawe direktori anyar ing ngisor wp-content/themes lan jeneng iku kaya twentytwenty-child utawa apa wae sing disenengi.

Nelusur menyang wp-content/themes/twentytwenty-child lan nggawe anyar style.css file kanthi judhul ing ngisor iki:

/*
Theme Name: My Twenty Twenty Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty.
Author: Your Name
Author URI: https://example.com/
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

Sabanjure, kita kudu nyakup stylesheet tema induk. Ing direktori sing padha, gawe ing ngisor iki functions.php berkas:

Now go to Appearance → Themes and activate your Child Theme. You can now start with your customizations.

Activate the child theme
Activate the child theme

You can change almost anything in Twenty Twenty, from adding custom templates to adding your custom styles or changing the theme’s default styles.

Here I will show you how to create a new custom template for single posts and pages.

Adding a Custom Post/Page Template in Twenty Twenty

So far, we have created a child theme for Twenty Twenty and attached the parent styles to the child theme’s stylesheet. In the example below, we’ll get rid of the header and the footer, making room for the page’s body in a post/page template file.

Step 1

Copy and paste the following files from the parent theme to the child theme’s directory:

  • templates/template-full-width.php
  • header.php
  • footer.php

Step 2

Rename template-full-width.php to template-canvas.php (or whatever you like). Open the file, delete the current content, and paste the following:

Template Name sets the name of the template file as you’ll see it in the Block Editor, while Template Post Type defines the post types supporting this template file. The get_template_part function loads the singular.php file from the parent theme (we don’t need a copy of this file in our child theme).

Go to the WordPress dashboard and create a new post. Now you should find an additional page template in the Post attributes section.

A new template is available in Post Attributes
A new template is available in Post Attributes

Step 3

And now comes the fun part. Open header.php in your favorite text editor and wrap the header element inside the following if statement:


	

	

This code checks whether the page template is not templates/template-canvas.php. If the page template is templates/template-canvas.php, then it won’t include the site header and the modal menu.

Similarly, we can remove the footer from a post page when the active page template is our canvas. Just add the same condition in footer.php as shown below:


	
...

You can download the code of this example here.
Now create a new post or page, select the Canvas template in Post/Page attributes and check the page on the front site.

We took a closer look at the new WordPress default theme Twenty Twenty. Check out all the main features you need to know about! 🆕②⓪②⓪Click to Tweet

Summary

Twenty Twenty is a minimalist WordPress theme, with a single column layout. The way we’ll use it mostly depend on the evolution of the Block Editor. As Anders expressively says:

“The promise of the Block Editor is to give users the freedom to design and structure their sites as they see fit”.

Following Twenty Nineteen, the new Twenty Twenty default theme is the second in a new generation of themes aiming to “allow the construction of websites without manual code editing”. WordPress sites powered by the Twenty Twenty theme come in all shapes and sizes. To find out if a theme is using Twenty Twenty, check out our handy WordPress theme detector tool.

If you think that Gutenberg is still not completely reliable for your projects yet, you could add the blocks you’ll need with plugins like the ones listed above. Or, simply, you can embrace a third-party page builder.

Up to you now: install the new default WordPress theme, play around with it, and let us know what your thoughts are here in the comments!

Related Articles

0 Comments
Inline Feedbacks
View all comments
Back to top button