Funzionamento base

Wordpress si basa su alcuni file standard (e/o sulle loro personalizzazioni) che devono trovarsi all'interno della cartella del template. Questi file sono :

  • style.css
  • functions.php
  • header.php
  • footer.php
  • 404.php
  • archive.php
  • comments.php
  • home.php
  • index.php
  • page.php
  • search.php
  • searchform.php
  • sidebar.php
  • single.php

Possono essere modificati a piacimento.

STYLE.CSS

Questo file indica a wordpress le informazioni del tema. Al suo interno, prima delle regole css, troveremo una serie di righe come queste.

/*
Theme Name: Avada Child
Description: Avada Child theme
Author: Artera
Template: Avada
*/

Si dovrebbe sempre creare un tema figlio, quando si intende partire da un tema fatto da altri per poi modificarlo, in modo da poter aggiornare il tema padre senza perdere le modifiche apportate (al massimo facendo delle sistemazioni se le modifiche fatte vanno in conflitto con gli aggiornamenti del tema padre).

Per creare un tema figlio: in wp-content/themes/ avremo i nostri temi tra cui il tema padre (ad esempio Avada). Creeremo quindi la cartella Avada-child, con all’interno un file style.css con le righe scritte sopra. Le uniche righe obbligatorie sono il theme name e il template (che deve essere il nome del tema padre, che di solito corrisponde al nome della cartella del tema).

FUNCTIONS.PHP

Questo file è il punto di partenza dello sviluppo. Qui si potranno scrivere tutte le funzioni e le regole che serviranno al nostro tema, oppure richiamare dei file nel tema, salvati in sottocartelle con all’interno tali regole/funzioni per avere tutto più ordinato. Viene richiamato sempre, sia nel backend sia nel frontend. Richiamiamo eventuali files con require / require_one / include /include_once

In questo file scriveremo, o includeremo files in cui scriveremo, anche tutte le istruzioni necessarie al funzionamento del sito come ad esempio quella per poter gestire l’immagine in evidenza di pagine e post : add_theme_support( 'post-thumbnails' );

Il foglio di stile andrà a sostituire quello del padre. Quindi se volessimo avere lo stile del tema padre come base per poi aggiungere altre nostre modifiche, dovremmo includerlo e per farlo, nel file functions.php aggiungeremo il seguente codice.

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

In functions.php scriviamo anche il codice per caricare del css e dei js personalizzati, caricati in header.php da wp_head(); :

function caricamento_script_e_css() {
	wp_enqueue_style('css', get_template_directory_uri().'/style.css'); // per caricare un css
	wp_enqueue_script('maps', 'https://maps.googleapis.com/maps/api/js'); // per caricare un js esterno
	wp_enqueue_script('markerclusterer', get_stylesheet_directory_uri().'/js/markerclusterer.js'); // per caricare un js interno
	wp_enqueue_script('maps2', get_stylesheet_directory_uri().'/js/script_mappa.js', array('maps', 'jquery')); // per caricare un js interno DOPO altri js
}
add_action('wp_enqueue_scripts', 'caricamento_script_e_css');

Al posto di get_template_directory_uripossiamo usare anche get_stylesheet_directory_uri.Nel primo caso, in presenza di un tema figlio, verrà preso l'url del padre, altrimenti, nel secondo caso, viene preso l'url del tema attivo in quel momento.
Possiamo poi nascondere voci ed elementi nel backend del menù, anche a seconda dell’utente

function custom_css_editor() { // funzione richiamata poco sotto
	echo '<style type="text/css">#minor-publishing-actions{display: none !important;}</style>'; 
} 
function custom_menu_page_removing() { 
	remove_menu_page("index.php"); 
	global $current_user;
	$user_roles = $current_user->roles;
	$user_role = array_shift($user_roles);
	if ($user_role == "editor"){ 
		add_action('admin_head', 'custom_css_editor'); // solo per ruolo editor la funzione sopra, che aggiunge codice css per nascondere elementi particolari 
	} 
} 
add_action('admin_menu', 'custom_menu_page_removing', 999);

Come si può notare si è usata la funzione di WP add_action, che prevede due parametri : un hook (vedere dopo, per ora diciamo che è un "quando eseguire") e la funzione da eseguire. Per la lista degli hook default di wp vedere qui : https://codex.wordpress.org/Plugin_API/Action_Reference

Ci sono tantissime altre funzionalità, che vanno sempre messe in functions.php o in files da quello richiamato, utili a seconda di quello che si deve fare.

HEADER.PHP

Questo file verrà richiamato da ogni template di pagina tramite

<?php get_header(); ?>

Sarà ovviamente il file che conterrà l’header del nostro sito

FOOTER.PHP

Questo file verrà richiamato da ogni template di pagina tramite

<?php get_footer(); ?>

Sarà ovviamente il file che conterrà il footer del nostro sito

 

ESERCIZI

  1. Creare un tema figlio a partire da un tema base (sixteen, seventeen...) di wp
  2. Impostare un header di pagina con un logo
  3. Impostare un footer di pagina con un link ad una pagina privacy, creandola nel backend
  4. Creare e far funzionare un file css e un file js custom (nel js scrivere anche solo alert("ciao"); o un console.log("ciao");) personalizzando ad esempio la dimensione del logo