Adaugarea fisierelor de continut si de sablon

Dupa ce am aratat cum sa cream tema si sa adaugam antetul fisierului style.css, in articolul anterior, putem trece la pasul urmator.
Inainte de a crea primele fisiere de sablon, va trebui sa introducem in fisierul functions.php niste linii de cod prin intermediul carora adaugam functionalitatile de care avem nevoie in tema noastra. Pentru inceput cream un meniu:

function custom_navigation_menus() {
	$locations = array(
		'Meniu' => __( 'Meniu', 'text_domain' ),
	);
	register_nav_menus( $locations );
}
add_action( 'init', 'custom_navigation_menus' );

Dupa ce am creat meniul, putem adauga o bara laterala, folosind urmatorul cod:

function custom_sidebars() {
    register_sidebar( array(
        'name'          => __( 'Primary Sidebar', 'theme_name' ),
        'id'            => 'sidebar-1',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
 

}
add_action( 'widgets_init', 'custom_sidebars' );

In continuare, vom putea adauga setarile de baza ale temei:

//latime continut
if ( ! isset( $content_width ) )
	$content_width = 1200;

// Inregistrare setari generale
function custom_theme_features()  {

	// Tipurile de formate disponibile in cadrul postarilor
	add_theme_support( 'post-formats', array( 'status', 'quote', 'gallery', 'image', 'video', 'audio', 'link', 'aside', 'chat' ) );

	// Activarea imaginilor
	add_theme_support( 'post-thumbnails', array( 'post', ' page' ) );

	 // Dimensiune imagini
	set_post_thumbnail_size( 430, 300, true );

	// Fundalul paginilor (daca optati pentru imagine, stergeti codul de culoare si introduceti calea imaginii pe care vreti sa o utilizati)
	$background_args = array(
		'default-color'          => '#ffffff',
		'default-image'          => '',
		'default-repeat'         => '',
		'default-position-x'     => '',
		'wp-head-callback'       => '',
		'admin-head-callback'    => '',
		'admin-preview-callback' => '',
	);
	add_theme_support( 'custom-background', $background_args );

	// Aici puteti adauga o imagine implicita pentru sectiunea header
	$header_args = array(
		'default-image'          => '',
		'width'                  => 1000,
		'height'                 => 400,
		'flex-width'             => false,
		'flex-height'            => false,
		'uploads'                => true,
		'random-default'         => false,
		'header-text'            => false,
		'default-text-color'     => '',
		'wp-head-callback'       => '',
		'admin-head-callback'    => '',
		'admin-preview-callback' => '',
		'video'                  => true,
		'video-active-callback'  => '',
	);
	add_theme_support( 'custom-header', $header_args );

	// Implementare suport pentru html
	add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

	// Introducere titlu site (tag)
	add_theme_support( 'title-tag' );

	// Adaugare optiuni de stilizare in editorul WordPress
	add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'custom_theme_features' );

Daca doriti sa adaugati si alte fisiere CSS, le puteti inregistra individual astfel:

function custom_styles() {
	wp_register_style( 'numefisier', 'aici-scrii-calea-fisierului', false, false, 'all' );
	wp_enqueue_style( 'numefisier' );
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );

Deasemenea, vom adauga si o bara de cautare:

function my_custom_widget_area_init() {
    register_sidebar( array(
        'name'          => 'Top Nav - Search',
        'id'            => 'top_nav_search',
        'before_widget' => '',
        'after_widget'  => '',
        'before_title'  => '',
        'after_title'   => '',
    ) );
}
add_action( 'widgets_init', 'my_custom_widget_area_init' );

Dupa introducerea acestui continut in fisierul functions.php, putem incepe cu editarea fisierelor search-form.php, header.php, sidebar.php si footer.php.

Fisierul search-form.php

In acest fisier vom introduce un formular prin intermediul caruia utilizatorii vor putea cauta in continutul site-ului.

<div>
    <?php if ( is_active_sidebar( 'top_nav_search' ) ) : ?>
    <div class="search-bar"><?php dynamic_sidebar( 'top_nav_search' ); ?></div>
    <?php endif; ?>
</div>

Fisierul header.php

Acest fisier va contine antetul site-ului. Din structura html face parte sectiunea <head>, urmata de deschiderea tagului <body>, dupa care vom introduce continutul pe care il dorim vizibil utilizatorilor in toate paginile, in partea de sus.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header">
		<title>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'nume' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo('descrierea site-ului'); ?></h2>
		</title>

		<nav class="main-navigation">
			<?php
			wp_nav_menu(
				array(
					'theme_location' => 'primary',
					'menu_class'     => 'Menu',
				)
);
?>
		</nav>

		<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'nume', 'display' ) ); ?>" /></a>
		<?php endif; ?>
	</header>
	<div id="main" class="wrapper">

Aici vom oferi posibilitatea de afisare a titlului site-ului, a meniului principal, a descrierii si a unei imaginii implicite header-ului. Daca folosim un sablon stilizat in CSS si Bootstrap, vom invoca intre tagurile <head> si </head> calea catre fisierele respective, utilizand metoda:

wp_enqueue_style( 'nume-fisier', get_template_directory_uri() . '/calea/fisierului.css',false,'1','all');

Fisierul footer.php

In acest fisier vom introduce continutul vizibil utilizatorilor pentru partea de jos a paginilor site-ului urmat de partea de inchiderea a tagului <body>.

</div> // inchiderea div-ului cu clasa "wrapper"
<footer id="colophon" class="site-footer">
			<div class="site-info">


				<a href="<?php echo esc_url( __( 'aici se introduce textul pentru copyright', 'numele temei' ) ); ?>">
</a>

		</footer>

</div>
	<?php wp_footer(); ?>

Si nu in ultimul rand fisierul sidebar.php

<div id="sidebar-primary" class="sidebar">
    <?php dynamic_sidebar( 'primary' ); ?>
</div>

Continuarea tutorialului o puteti vedea in articolul urmator.