Come visualizzare i messaggi in primo piano con miniature in WordPress

Esistono numerosi modi condivisi sul Web per visualizzare i messaggi in primo piano. Ma quasi tutte le funzioni e i plugin mancano di qualcosa. In questo tutorial, condivideremo una funzione che consentirà agli utenti di selezionare Post ID specifici e visualizzarli come post in evidenza con miniature utilizzando la funzione Thumbnail post di WordPress che è stata aggiunta in WordPress 2.9. In questo modo è possibile evitare di utilizzare post appiccicosi che a volte potrebbero essere necessari a causa di altre funzioni in un progetto personalizzato.

Nota: questo è un tutorial in più parti, quindi ti consigliamo di avere una certa conoscenza di WordPress, PHP, HTML e CSS.

Abbiamo modificato il plug-in Featured Posts Lists di San of W3C Gallery. Anche se San ha creato una versione avanzata del suo plugin per mostrare le immagini, richiede un campo personalizzato. In questo modo utilizzerai semplicemente la funzione Post Thumbnail in 2.9.

Prodotto finale

Plugin modificato

Per prima cosa dovresti incollare il codice qui sotto nel tuo functions.php file O in un file separato e caricarlo come plugin.

the_post (); ?>        "); $ ol_flash ="; $ posts_settings = get_option ('posts_settings'); // Funzione ADMIN PANLE SEETTING posts_add_pages () // Aggiungi un nuovo menu nella scheda Impostazioni o Opzioni: add_options_page ("Elenco dei messaggi in primo piano", "Elenco dei messaggi in primo piano", 8, "postsoptions", "posts_options_page");  / * Definisci costanti e variabili * / define ('PLUGIN_URI', get_option ('siteurl'). '/ Wp-content / plugins /'); / * Funzioni * / funzione posts_options_page () global $ ol_flash, $ posts_settings, $ _POST, $ wp_rewrite; if (isset ($ _ POST ['posts_id'])) $ posts_settings ['posts_id'] = $ _POST ['posts_id']; update_option ( 'posts_settings', $ posts_settings); $ ol_flash = "La tua lista in evidenza è stata salvata.";  if ($ ol_flash! = ") echo '
'. $ ol_flash. '
'; eco ''; eco '
Aggiungi l'ID dei post per creare un elenco di post in primo piano
'; eco '
 
Questo plug-in offre piena libertà di visualizzazione di più post come elenco post in primo piano sul tuo sito.
 
Post ID:
 
Suggerimento SAN: per aggiungere più post ID utilizzare "," per esempio: "1, 2, 3" 
 
'; eco ' 
Incolla questo codice nel punto in cui desideri che venga visualizzato l'elenco dei post in primo piano  
 Oppure puoi passare la variabile prima e dopo come questa impostazione predefinita ", $ dopo = ")?>
 '; eco '';  add_action ('admin_menu', 'posts_add_pages'); ?>

Dopo averlo fatto, puoi visualizzarlo incollando il codice ovunque nel file di modello:

CSS personalizzato

Utilizziamo classi CSS personalizzate, quindi anche tu ne hai bisogno. Incolla il seguente codice nel tuo file style.css.

.popcontainer border-bottom: 1px solid # D0CDC5; larghezza: 274 px; fluttuare: a sinistra; riempimento: 0 0 15px 0; margine: 0 0 15px 0;  .popthumb width: 60px; fluttuare: a sinistra; sfondo: # D0CDC5; imbottitura: 5px; margine: 0 10px 0 0;  .popcontent width: 185px; fluttuare: a sinistra;  .popcontent h2 font-size: 13px; margine: 0 0 3px 0; padding: 0;  .popcontent h2 a text-decoration: none; 

Opzioni avanzate

Il codice precedente estrarrà la miniatura predefinita e la visualizzerà con il titolo del post e la data di pubblicazione del post. L'unico problema è che se si desidera utilizzare una dimensione diversa della miniatura. Il tema potrebbe utilizzare la funzione miniatura in un'altra posizione, quindi non è possibile utilizzare due diverse dimensioni con i codici correnti. Quindi dovrai modificarlo un po 'e aggiungere una nuova dimensione dell'immagine.

Apri il tuo functions.php e trova i codici delle miniature e aggiungi il seguente codice:

add_theme_support ('post-thumbnails'); set_post_thumbnail_size (150, 150, true); // Normal post thumbnails add_image_size ('featured-thumbnail', 60, 60); // Dimensioni della miniatura in primo piano

Ora trova la seguente riga nel plugin sopra:

e sostituirlo con:

Questo ti permetterebbe di avere due diverse dimensioni.

Un altro problema noto potrebbe essere se la miniatura non è proporzionale, causerebbe la visualizzazione di un'immagine più piccola anziché di 60 x 60 pixel perché WordPress non ha l'abilità di ritaglio. Per evitare che tu possa usare l'aggiuntivo Image Sizes Plugin che ha la possibilità di ritagliare. Assegna un nome alla dimensione dell'immagine personalizzata come miniatura in primo piano e utilizza lo stesso codice di sopra per sostituire il codice originale.

L'unico motivo per cui abbiamo usato questo metodo era perché stavamo usando post appiccicosi per visualizzare un altro elenco. È inoltre possibile ottenere ciò utilizzando post appiccicosi. Per il trucco delle miniature, abbiamo scelto il plug-in Image Sizes aggiuntivo perché vogliamo evitare l'uso di JavaScript TimThumb e mantenere un sito di caricamento rapido.

Se hai altre soluzioni a questo problema, condividilo con noi nei commenti.