Navigazione articoli personalizzata su WordPress ed Elementor

# # ,

€4.99

Con il codice PHP GRATUITO che trovi a fine pagina puoi aggiungere i tasti di navigazione prossimo e precedente sotto ogni articolo, sotto forma di card personalizzate con immagine, link e titolo. Il codice funziona con Elementor FREE e PRO ma anche con WordPress senza alcun builder. Nel video viene illustrato il procedimento di configurazione. Acquistando il codice si può ottenere la funzione che aggiunge card personalizzabili quando l’utente si trova nel primo o ultimo articolo; in questo caso il codice aggiunge una card dove è possibile impostare – tramite shortcode – link, immagine e titolo.

Requisiti

Elementor

☑

Elementor Pro

☑

Altri Plugin

☑

Difficoltà modifiche

Facile

Scarica e usalo subito!

Pronto all'uso

Scarica il templeate, inseriscilo sul tuo sito e utilizzalo subito

Sempre disponibile

Dopo l'acquisto, il file sarà sempre disponibile al download

Dove vuoi

L'utilizzo non è limitato ad un singolo sito. Puoi utilizzarlo su tutti i siti web che vuoi

Personalizzabile

Personalizzazione semplice nella maggior parte dei template. Altri richiedono conoscenza base di CSS/HTML o Javascript

Esempi

[ Il risultato potrebbe essere leggermente diverso ]

Codice

PHP

				
					function get_adjacent_article_data() {
    if (is_single()) {
        global $post;

        $current_article_id = $post->ID;
        $previous_article = get_previous_post();
        $next_article = get_next_post();

        $data = array(
            'currentArticleId' => $current_article_id,
            'previousArticle' => $previous_article,
            'nextArticle' => $next_article
        );

        return $data;
    }

    return null;
}

function article_navigation_shortcode() {
    ob_start();
    $article_data = get_adjacent_article_data();

    if ($article_data) {
        $is_first_article = !$article_data['previousArticle']; 
        $article_navigation_class = $is_first_article ? 'reversed' : '';

        ?>
        <div class="article-navigation <?php echo $article_navigation_class; ?>">
            <?php if ($article_data['previousArticle']) : ?>
                <a href="<?php echo get_permalink($article_data['previousArticle']->ID); ?>" class="navigation-card previous-article">
                    <img decoding="async" src="<?php echo get_the_post_thumbnail_url($article_data['previousArticle']->ID); ?>" alt="">
                    <span class="nav-arrow arrow-left"></span>
                    <span class="prevtitle"><?php echo get_the_title($article_data['previousArticle']->ID); ?></span>
                </a>
            <?php endif; ?>

            <?php if ($article_data['nextArticle']) : ?>
                <a href="<?php echo get_permalink($article_data['nextArticle']->ID); ?>" class="navigation-card next-article">
                    <img decoding="async" src="<?php echo get_the_post_thumbnail_url($article_data['nextArticle']->ID); ?>" alt="">
                    <span class="nav-arrow arrow-right"></span>
                    <span class="nexttitle"><?php echo get_the_title($article_data['nextArticle']->ID); ?></span>
                </a>
            <?php endif; ?>
        </div>

        <?php
    }

    return ob_get_clean();
}
add_shortcode('article_navigation', 'article_navigation_shortcode');

Shortcode in tutti gli articoli

				
					function add_article_navigation_shortcode_to_content($content) {
    if (is_single() && in_the_loop() && is_main_query()) {
        $article_navigation_shortcode = do_shortcode('[article_ navigation]');
        $content .= $article_navigation_shortcode;
    }
    return $content;
}
add_filter('the_content', 'add_article_navigation_shortcode_to_content');



!!!!! RICORDA DI ELIMINARE LO SPAZIO IN [article_ navigation] !!!!!

CSS 

				
					/* Stile generale delle card di navigazione */
.article-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 10px 0;
}

/* Stile per la card di navigazione */
.navigation-card {
  flex: 1;
  position: relative;
  max-width: 45%;
  aspect-ratio: 2;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 10px 0;
  display: flex;
  overflow: hidden;
}
/* Responsive */
@media screen and (max-width:767px){
.article-navigation {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin:; 0;
    flex-direction: column;
}
.navigation-card {
  flex: 1;
  max-width: 100%;
  border-radius: 10px;
  margin: 10px 0;
}
}
/* Stile per l'immagine dell'articolo */
.navigation-card img {
  width: 100%;
  height: auto; 
  object-fit: cover; 
  border-radius: 10px; 
}

/* Stile per il titolo dell'articolo */
.navigation-card span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  margin: 0;
  color: #fff;
  border-radius: 0 0 10px 10px;
  display: flex;
  justify-content: center;
  font-size: 25px;
}
.prevtitle, .nexttitle {
background: linear-gradient(to top, rgba(13, 17, 23, 1), rgba(0, 0, 0, 0));
}
/* Stile per il link all'articolo */
.navigation-card a {
  text-decoration: none;
  color: #007bff;
}
.navigation-card .nav-arrow  {
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 5px;
}

.arrow-left::before, .arrow-right::after {
    display: inline-block;
    position: absolute;
    background: #0D1117;
    color: white;
    font-size: 18px;
    width: 35px;
    height: 35px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    transition: all 0.5s ease;
    transform: translateY(-50%);
}

.arrow-left::before {
    content: "\2190";
    left: 10px;
}

.arrow-right::after {
    content: "\2192";
    right: 10px;
}
.navigation-card:hover .arrow-left::before,
.navigation-card:hover .arrow-right::after {
    width: 100%;
    height: 350px;
    line-height: 350px;
    transform: translateY(-50%);
    border-radius: 10%;
    font-size: 40px;
}
.navigation-card:hover .arrow-right::after {
    right:0;
    font-size: 40px;
    background: linear-gradient(to top, rgba(13, 17, 23, 0.9), rgba(0, 0, 0, 0));
}
.navigation-card:hover .arrow-left::before{
    left:0;
    font-size: 40px;
    background: linear-gradient(to top, rgba(13, 17, 23, 0.9), rgba(0, 0, 0, 0));
}

/* Sposta a destra se visualizziamo il primo articolo */
.article-navigation.reversed {
  flex-direction: row-reverse;
}

SHORTCODE - CODICE GRATUITO

				
					[article_ navigation] 

!!!!! RICORDA DI ELIMINARE LO SPAZIO IN [article_ navigation] !!!!!

SHORTCODE - CODICE FULL

				
					[article_ navigation lastpost_link="link personalizzato ultimo post" 
lastpost_title="titolo personalizzato ultimo post" 
lastpost_image="link immagine ultimo post"
firstpost_link="link personalizzato primo posto" 
firstpost_title="titolo personalizzato ultimo post" 
firstpost_image="ink immagine primo post" ]



!!!!! RICORDA DI ELIMINARE LO SPAZIO IN [article_ navigation] !!!!!

10% di sconto su TUTTO il CARRELLO

Iscriviti alla nostra newsletter per ricevere aggiornamenti settimanali dei nuovi template e ricevi subito uno sconto del 10%

Altri Template

Il prezzo originale era: €19.99.Il prezzo attuale è: €13.99.
Template Scroll Orizzontale Elementor – Layout responsive
€14.99
Template ristorante WordPress – Elementor Pro
Il prezzo originale era: €2.99.Il prezzo attuale è: €0.99.
Template plugin condivisione social Javascript
€1.99
Template card a comparsa
€2.99
Template slide verticale infinita, scroll automatico
Il prezzo originale era: €6.99.Il prezzo attuale è: €4.99.
Template per prodotti o articoli correlati, consigliati, manuali o tutti
Navigazione articoli personalizzata su WordPress ed Elementor

€4.99

Recensioni

Recensioni

Ancora non ci sono recensioni.

Recensisci per primo “Navigazione articoli personalizzata su WordPress ed Elementor”

Ti trovi sulla sezione demo di WebAwesome, dove puoi trovare effetti e template per il tuo sito web e vedere le bozze realizzate. Per contattarci, controllare il portfolio dei lavori svolti e il listino prezzi, puoi tornare in qualsiasi momento al dominio principale cliccando su WebAwesome. Presto saranno disponibili al download parte dei nostri template!