Creare un tema WordPress responsive: una guida completa allo sviluppo da zero

Creare un tema WordPress responsive: una guida completa allo sviluppo da zero

Nell’ambiente di rete odierno, caratterizzato dalla coesistenza di numerosi dispositivi, il design responsivo è diventato un requisito fondamentale nello sviluppo di siti web. Un ottimo tema WordPress responsivo non solo è in grado di adattare dinamicamente il proprio layout in base alle dimensioni dello schermo, ma garantisce anche un’esperienza d’uso uniforme su diverse piattaforme. Questo articolo ha lo scopo di fornire agli sviluppatori una guida completa per partire da zero, che copre aspetti chiave come i preparativi iniziali, la creazione della struttura di base del tema, l’implementazione di un layout responsivo e l’aggiunta di funzionalità aggiuntive.

Preparazioni e inizializzazione del progetto

Prima di iniziare a scrivere qualsiasi codice, è necessario configurare un ambiente di sviluppo locale. Questo solitamente prevede l’installazione di software per server locali, dell’ambiente PHP e del programma WordPress. Si consiglia l’uso di strumenti come Laravel Valet, Local by Flywheel o XAMPP, che permettono di creare rapidamente un ambiente PHP isolato.

Si consiglia di leggere Guida pratica al processo di creazione di siti web professionali: dalla pianificazione all’attivazione online。

Successivamente, nella directory di installazione di WordPress… wp-content/themes All’interno della cartella, creare una nuova sottocartella dedicata ai temi. Il nome di questa sottocartella dovrà rappresentare in modo univoco il contenuto della stessa; si consiglia di utilizzare lettere minuscole, numeri e trattini, ad esempio: my-responsive-themeIl nucleo del tema riguarda due file essenziali:style.css 和 index.php。

UltaHost – Hosting per siti WordPress

Garanzia di rimborso entro 30 giorni, larghezza di banda illimitata e accesso ai database, protezione gratuita contro gli attacchi DDoS; sconto del 50% per l’acquisto di un piano valido per 3 anni (da 3 a 4 TB di spazio di archiviazione).

pagina di accesso

Stili di presentazione style.css Non si tratta soltanto del file di stile del tema, ma anche del suo “cartellino d’identità”. Deve contenere una sezione iniziale con informazioni sul tema, formattata come un commento CSS. Questa sezione viene utilizzata per descrivere i metadati del tema al sistema WordPress.

/*
Theme Name: My Responsive Theme
Theme URI: https://example.com/my-responsive-theme/
Author: Your Name
Author URI: https://example.com
Description: A custom-built responsive WordPress theme with modern features.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-responsive-theme
*/

Costruire la struttura principale di un tema

Un tema WordPress completo e funzionale è composto da una serie di file di template. I file di template sono file PHP utilizzati da WordPress per rendere diversi tipi di pagine. Per iniziare, creiamo il template della pagina principale. index.php Come template di base per tutte le pagine.

Per rendere i componenti di un tema riutilizzabili, è necessario suddividere le parti comuni della pagina in file di template separati. Le suddivisioni più importanti includono la parte che mostra gli articoli del blog in ciclo, nonché la parte superiore e quella inferiore del sito web.

Creare header.php Il file viene utilizzato per contenere il codice relativo alla parte iniziale del sito web, come ad esempio le dichiarazioni del documento (document metadata). LOGO della regione, del sito web e il menu di navigazione principale: utilizzare le funzioni di base di WordPress nei punti appropriati. wp_head()Permette agli plugin e ai temi di inserire codice CSS e script in questo punto.

Si consiglia di leggere Lo sviluppo di temi WordPress, dall'inizio all'avanzato: una guida fondamentale per creare siti web personalizzati.。

Creare footer.php Il file viene utilizzato per contenere il testo del piede di pagina del sito web, come informazioni sul copyright, link di navigazione aggiuntiva, ecc. Anche in questo caso, è necessario utilizzare delle funzioni. wp_footer() Per assicurare che i plugin e i script funzionino correttamente…

Creare sidebar.php Per definire il contenuto della barra laterale…

Successivamente, index.php Introducete queste parti comuni all’interno del codice, utilizzando delle funzioni. get_header()、get_footer() 和 get_sidebar() È possibile caricare dinamicamente i file di template corrispondenti. L’elenco degli articoli (la parte principale del ciclo) viene solitamente scritto direttamente nel codice sorgente. index.php Sì.

hosting.com Hosting condiviso

Prestazioni elevate con CPU AMD EPYC, storage SSD NVMe e LiteSpeed, supporto interno di esperti 24 ore su 24, 7 giorni su 7, misure di sicurezza avanzate, tra cui SSL, brute force, malware e protezione DDoS, risparmi fino a 73%

pagina di accesso

// index.php 文件示例
<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 引入文章内容模板
            get_template_part('template-parts/content', get_post_type());
        endwhile;
        the_posts_navigation();
    else :
        get_template_part('template-parts/content', 'none');
    endif;
    ?>
</main>

<?php
get_sidebar();
get_footer();
?>

Per ulteriore decoupling (per separare i componenti del sistema in modo più chiaro e gestibile), è possibile creare frammenti di template dedicati al contenuto degli articoli. Questi frammenti di template dovrebbero essere posizionati nel directory principale relativo ai temi (il “root directory” dei temi). template-parts Crea una cartella e all'interno di essa crea un file. content.php Questo file si concentra sull’output dei titoli, dei metadati, delle immagini in miniatura, dei riassunti e dei link “Leggi di più” per un singolo articolo.

Realizzare un CSS e un layout responsivi

Il cuore di un layout responsive risiede nei cosiddetti “media query” di CSS. Questi permettono di applicare regole CSS diverse in base alla larghezza dello schermo visualizzato dall’utente. È una buona pratica iniziare progettando gli stili di base tenendo conto delle esigenze degli dispositivi mobili, per poi aggiungere ulteriori stili per schermi più grandi attraverso i media query.

Prima di tutto, crea un file nel directory principale del tema con il nome… assets Apri la cartella e crea al suo interno… css 和 js Sottocartelle: scrivere i principali stili di formattazione all’interno di queste sottocartelle. style.cssMa per una migliore organizzazione, è possibile creare un file separato per i stili responsivi, ad esempio… assets/css/responsive.css。

Si consiglia di leggere Come sviluppare un tema WordPress potente ed ottimizzato per i motori di ricerca (SEO)?。

È necessario caricare correttamente questi file di stile all’interno del tema. Questo viene fatto utilizzando… wp_enqueue_style() La funzione è all’interno del tema. functions.php Verrà implementato nel file. Per iniziare, creare prima un… functions.php Documenti.

// functions.php 文件示例
function my_responsive_theme_enqueue_styles() {
    // 加载主样式表 style.css
    wp_enqueue_style('my-responsive-theme-style', get_stylesheet_uri(), array(), '1.0.0');

    // 加载响应式样式表
    wp_enqueue_style('my-responsive-theme-responsive-style', get_template_directory_uri() . '/assets/css/responsive.css', array('my-responsive-theme-style'), '1.0.0');
}
add_action('wp_enqueue_scripts', 'my_responsive_theme_enqueue_styles');

Ecco un esempio di codice CSS per un layout responsive, che definisce un semplice sistema a griglia e dei punti di interruzione (breakpoints).

Hosting condiviso InterServer

Hosting condiviso $2,50 USD al mese, primo mese $0,1 USD codice promozionale tryinterserver, 461 script di applicazioni cloud, installazione con un clic.

pagina di accesso

/* 基础样式 - 移动端优先 */
.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}
.main-content {
    float: none;
    width: 100%;
}
.sidebar {
    float: none;
    width: 100%;
}

/* 平板断点：768px 及以上 */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    .main-content {
        float: left;
        width: 70%;
    }
    .sidebar {
        float: right;
        width: 28%;
    }
}

/* 桌面断点：1024px 及以上 */
@media (min-width: 1024px) {
    .container {
        max-width: 1140px;
    }
}

Anche le immagini devono essere adattate alle diverse dimensioni dello schermo (risponsive). Per farlo, si utilizzano le regole di CSS. max-width: 100%; height: auto; È possibile garantire che l’immagine non vada oltre i confini di qualsiasi contenitore in cui venga inserita.

Un approccio più moderno consiste nell’utilizzare al contempo WordPress e… (il resto del testo non è stato fornito). srcset 和 sizes Proprietà. Utilizzo di funzioni. the_post_thumbnail('full') Quando vengono visualizzate immagini con caratteristiche particolari, WordPress genera automaticamente il codice HTML necessario per farlo. Questo codice permette di caricare immagini di dimensioni diverse in base alla densità e alle dimensioni dello schermo, ottimizzando notevolmente le prestazioni del sito.

Rafforzare le funzionalità tematiche e ottimizzare il sistema.

Una volta completata la struttura di base di un tema, è necessario migliorarne l’usabilità e la professionalità aggiungendo funzionalità e ottimizzando i dettagli. Il primo passo da compiere è creare il menu di navigazione per l’area di registrazione. WordPress consente di farlo utilizzando delle funzioni specifiche. register_nav_menus() Per dichiarare quale posizione nel menu il tema supporta…

// 在 functions.php 中注册菜单
function my_responsive_theme_setup() {
    register_nav_menus( array(
        'primary' => __('Primary Menu', 'my-responsive-theme'),
        'footer'  => __('Footer Menu', 'my-responsive-theme'),
    ) );
}
add_action('after_setup_theme', 'my_responsive_theme_setup');

Dopo l’iscrizione, è necessario… header.php 和 footer.php Chiamare la funzione nella posizione corrispondente. wp_nav_menu() Per visualizzare il menu…

L’area degli strumenti aggiuntivi è un elemento standard nei temi moderni. Permette agli utenti di aggiungere e gestire facilmente i blocchi di contenuto presenti nella barra laterale o nella parte inferiore della pagina in modo da poterli modificare in background. register_sidebar() Vieni a registrarti per utilizzare la funzione relativa alla creazione di piccoli strumenti (o “piccoli tool”).

function my_responsive_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __('Main Sidebar', 'my-responsive-theme'),
        'id'            => 'sidebar-1',
        'description'   => __('Add widgets here to appear in your main sidebar.', 'my-responsive-theme'),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action('widgets_init', 'my_responsive_theme_widgets_init');

L’ottimizzazione delle prestazioni è la chiave del successo di un tema responsive. Oltre all’utilizzo di immagini… srcset Inoltre, è necessario elaborare il JavaScript caricato. Per impostazione predefinita, WordPress inserisce direttamente i file JavaScript all’interno del sito. Oppure subito dopo; ciò potrebbe bloccare la rendering della pagina. Per i script non essenziali, è possibile… wp_enqueue_script() Impostando l’ultimo parametro su “true”, lo script verrà caricato nella parte inferiore della pagina senza bloccare il processo di rendering.

Infine, è essenziale garantire che l’interfaccia utente del sito sia ottimale per l’uso con i dispositivi mobili, in particolare per quanto riguarda l’interazione tramite tocco. I pulsanti e i link devono avere aree di clic abbastanza grandi; inoltre, i menu di navigazione spesso vengono visualizzati in modalità “menu a hamburger” quando si utilizza un dispositivo mobile. Questo può essere realizzato utilizzando Media Queries in combinazione con JavaScript.

// 在 functions.php 中加载脚本
function my_responsive_theme_enqueue_scripts() {
    wp_enqueue_script('my-responsive-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_responsive_theme_enqueue_scripts');
// navigation.js 文件包含切换移动菜单的逻辑

Riassumendo

Sviluppare un tema WordPress responsive rappresenta un progetto complesso che richiede da parte dello sviluppatore una solida conoscenza dei principi del design responsive per il lato frontend, della logica di programmazione in PHP, nonché delle API interne di WordPress. Tutto ciò inizia dalla creazione dei componenti più basilari del tema stesso. style.css 和 index.php All’inizio del file, si procede alla sua suddivisione in parti graduali. header.php、footer.php L’utilizzo di frammenti di template consente di aumentare la riutilizzabilità del codice. Le funzionalità principali di risposta alle diverse dimensioni dello schermo vengono realizzate grazie alle query di media CSS e a strategie orientate ai dispositivi mobili; in combinazione con le soluzioni integrate da WordPress per l’adattamento delle immagini, il sito web può adattarsi efficacemente a vari tipi di dispositivi.

Il perfezionamento delle funzionalità dipende da… functions.php I vari elementi disponibili, come i “hook” e le funzioni, permettono di personalizzare il menu, l’area degli strumenti aggiuntivi, nonché di caricare in modo sicuro stili e script. Seguendo questi passaggi non solo si crea un tema esteticamente piacevole e adattabile a diverse esigenze, ma si comprende anche più a fondo il funzionamento del sistema di temi di WordPress. L’ottimizzazione continua delle prestazioni e l’attenzione ai dettagli dell’interfaccia per dispositivi mobili sono fondamentali per trasformare un tema “buono” in uno “eccellente”.

FAQ - Domande frequenti

Perché i miei stili personalizzati non vengono caricati?

Questo succede solitamente perché lo stile non è stato utilizzato correttamente tramite le funzioni appropriate. wp_enqueue_style() Aggiungilo alla coda. Per favore, controlla il tuo… functions.php File, e assicurarsi che il “hook” sia attivo. wp_enqueue_scripts È stato aggiunto correttamente, e i parametri di percorso della funzione sono esatti. La scheda “Rete” degli strumenti di sviluppo del browser può aiutarti a verificare se il file di stili è stato richiesto con successo.

Come creare template diversi per tipi di pagine diversi?

WordPress segue una struttura gerarchica dei template. Per creare un template per una pagina specifica, basta creare un file PHP con un nome appropriato all’interno della directory del tema. Ad esempio, il nome del file template per visualizzare un singolo articolo potrebbe essere… single.phpIl nome del template creato per le pagine statiche è… page.phpPuoi anche creare modelli più specifici, ad esempio… page-about.php Verranno utilizzate pagine dedicate esclusivamente per l’visualizzazione della sezione con l’alias “about”. WordPress le riconoscerà automaticamente e le utilizzerà correttamente.

In quale file CSS dovrebbero essere inserite le query relative ai media?

Dal punto di vista dell’organizzazione del codice, per i progetti di piccole dimensioni è possibile scrivere direttamente le query relative ai media nel file principale del progetto. style.css Nel file, i contenuti relativi ai modelli di base sono posizionati in prossimità delle parti corrispondenti. Per progetti di grandi dimensioni e complessi, è possibile suddividere gli stili responsivi in file separati, in base a punti di interruzione (breakpoints) o moduli specifici. responsive.css、tablet.cssPoi… functions.php Il contenuto viene caricato su richiesta. L’importante è garantire che l’ordine di caricamento sia corretto, per evitare problemi di sovrascrittura dei codici di stile.

Come posso rendere il mio tema compatibile con la traduzione di lingue?

Per rendere un tema compatibile con più lingue, è necessario preparare adeguatamente l’internazionalizzazione dei testi durante lo sviluppo. In altre parole, è fondamentale utilizzare le funzioni di traduzione fornite da WordPress in tutti i punti del codice in cui i testi devono essere tradotti. Ad esempio, si può utilizzare la funzione `wptranslate()` per gestire le operazioni di traduzione. __('文本', 'my-responsive-theme') 或 _e('文本', 'my-responsive-theme')。

Allo stesso tempo, style.css I commenti in testa e… functions.php Nella funzione di caricamento, è necessario dichiarare correttamente tutti gli elementi necessari. Text Domain(Dopo il completamento dello sviluppo, è possibile utilizzare strumenti come Poedit per estrarre tutte le stringhe da tradurre e generare il file di traduzione.) .pot Il file: il traduttore utilizza questo file per creare versioni del testo in diverse lingue. .po 和 .mo Compila i file e conservali nella cartella relativa al tema. /languages/ All’interno della directory.