• F
    User •

    Articolo precedente e articolo successivo

    Salve,
    ho inserito sul mio blog wordpress un plugin che mi consente di visualizzare (con relativo titolo) la navigazione a fine post per andare al post precedente o quello successivo (in ordine temporale). Non sono convinto però della grafica (non mi piace molto). Vorrei qualcosa del genere per intenderci:
    imageshack.com/a/img40/397/ulw1.jpg
    Per caso conoscete qualche plugin che faccia questo oppure qualche tecnica per creare un qualcosa di simile graficamente parlando?
    Grazie

    0
  • fda
    Moderatore •

    Ciao Franz22.
    Non conosco plugin perché non li ho cercati.
    Al plugin bello e pronto anche nella grafica hai due possibilità:

    1. provare a modificare la grafica del plugin che hai;
    2. eliminare il plugin e inserire codice e grafica da zero.
      Con la prima soluzione non posso aiutarti perché non ho il plugin installato (qualunque esso sia) e al momento c'ho la palla di vetro rotta :fumato:
      Con la seconda soluzione ti posto tutto qui nel topic, ma solo se ti serve davvero e mi dai qualche giorno.
      Fammi sapere.
      Ciao.;)
      F.
    0
  • F
    User •

    guarda se riuscissi davvero a postarmi come fare inserendo il codice e grafica da zero, beh, saresti sin troppo gentile 🙂

    0
  • fda
    Moderatore •

    Ciao Franz22.
    Appena ho una mezz'ora faccio una prova su uno dei miei siti e, quando è tutto OK, ti posto qui il codice con le istruzioni.
    A presto 😉
    F.

    0
  • fda
    Moderatore •

    Scriviamo su 2 file:

    • uno dei .css che carichi con gli articoli, ad esempio ../wp-content/themes/tuotemplate/style.css
    • il .php che stampa il singolo post, ad esempio ../wp-content/themes/tuotemplate/single.php
      Prima di aprirli fai una copia di backup.
      La soluzione è stata testata su un WordPress 3.x.x, se hai una versione precedente potresti dovere modificare qualcosa.
      Iniziamo dal foglio di stile. Apri il file con un editor e aggiungi alla fine:
    
/* Newt Prev Posts */


.npp-posts{
    border:solid 1px #e0e0e0;
    margin-bottom:40px;
    font-size:13px;
    line-height:14px;
        padding: 20px 0 80px 0;
}


.npp-posts i{
    color:#000;
}


.npp-posts a:link,
.npp-posts a:visited{
    color:#666;
}


.npp-next{
    float:left;
    width:278px;
    height:60px;
    text-align:right;
    padding-left:20px;
        display: inline;
}


.npp-middle{
    float:left;
    border-right:solid 1px;
    margin:0 20px;
    height:60px;
    width:1px;
        display: inline;
}


.npp-previous{
    text-align:left;
    float:left;
    width:278px;
    height:60px;
    padding-right:20px;
        display: inline;
}


.npp-posts a:hover{
    color:#ccc;
}


.npp-int{
    color:#000;
    font-size:10px;
    margin-bottom:10px;
    font-weight:bold;
    text-transform:uppercase;
}


.npp-left{
    float: left;
    margin-top:22px;
    margin-right:20px;
    color:#888;
    padding-bottom:10px;
        font-size: 2em;
}


.npp-right{
    float:right;
    margin-top:22px;
    margin-left:20px;
    color:#888;
    padding-bottom:10px;
        font-size: 2em;
}

    Salva il .css e apri il .php: dove scrivere dipende da dove vuoi che compaia il box. Io preferisco che sia visualizzato dopo il post e prima dei commenti, ma alcuni lo inseriscono anche sopra. Fatta la tua scelta, comunque, copia e incolla questo:

    
                // Inizio codice Next Prev Posts
                $post_precedente = get_previous_post(true);
                $post_successivo = get_next_post(true);
                
                echo "<div class='npp-posts'>";
                
                echo "<div class='npp-next'>";
                if (!empty($post_successivo))
                    echo "<div class='npp-int'><div class='npp-left'><</div>Successivo</div><a href=\"" . get_permalink($post_successivo->ID) . "\" title=\"" . $post_successivo->post_title . "\">" . get_the_title($post_successivo->ID) . "</a>";
                echo "</div>";


                echo "<div class='npp-middle'></div>";
                
                echo "<div class='npp-previous'>";
                if (!empty($post_precedente))
                    echo "<div class='npp-int'><div class='npp-right'>></div>Precedente</div><a href=\"" . get_permalink($post_precedente->ID) . "\" title=\"" . $post_precedente->post_title . "\">" . get_the_title($post_precedente->ID) . "</a>";
                echo "</div>";
                
                echo "</div>";
                echo "<div style='clear: both'></div>";
                //Fine codice next Prev Posts

    Note:

    • Il box che mi hai mostrato usa un metodo diverso per i simboli < e >, che sono font. Per velocizzare la pratica ed essere certo che funzionasse a tutti ho inserito semplici caratteri, ma l'effetto estetico lascia a desiderare. Puoi implementare quell'altra soluzione da te oppure giocare sul font nel .css (le classi sono npp-left e npp-right). In alternativa puoi usare un'icona, magari in sprite css (nel caso apri un topic nuovo e ti posto il codice già adatto al box).
    • Nel mio caso avevo una larghezza di 640px e andava bene così, ma tu potresti avere esigenze diverse: agendo lato css dovresti risolvere tutto ... beh, non proprio tutto: se hai un sito responsive ti tocca fare qualche modifica. Nel caso dammi qualche info in più e cerco di aiutarti anche su questo.
    • Se lo stile non ti piace puoi cambiarlo facilmente dal css.

    Fammi sapere se è andato bene.
    Saluti.
    F.

    0
  • F
    User •

    Ciao Francesco,
    ho inserito il tutto nel foglio di stile e in quella della singola pagina però secondo me devo modificare i richiami ai singoli articoli perché non riesce a richiamarne il titolo, probabilmente è il tema che uso che fa casini 😄 .
    imageshack.com/a/img5/3719/fzzx.jpg
    Detto questo, come ti ho detto in provato, è superlativo! Davvero fantastico ed è quello che cercavo da una vita!! :yuppi:

    0
  • fda
    Moderatore •

    Ciao Franz22.
    Mettiamo a posto una cosa alla volta.
    Intanto la larghezza: la tua credo sia 620px, mentre io l'ho settato per 640px: devi rubare 10 px a sinistra e 10 px a destra. Prova a impostare nel CSS il width in npp-next e npp-previous a 268px.
    Passiamo al perché non va. Faccio tre ipotesi:

    1. Ti sei perso un div, aperto o chiuso, o comunque qualcosa del codice, un punto e virgola ... capita. A me spesso. Di solito me ne accorgo non prima di avere imprecato in tutte le lingue del mondo. 😄
    2. C'è un problema con l'editor/il testo del codice copiato/la codifica. Ti faccio l'esempio di:

    echo "<div class='npp-next'>";

    A volte l'editor fa cose strane con " (le virgolette) e ' (apostrofo).
    3) La versione di WordPress e/o, come tu ipotizzi, il template. Nota che get_permalink e get_the_title sono di WP.
    Dai, cerchiamo di farlo funzionare :arrabbiato: ... per soddisfazione! :bigsmile:
    F.

    0
  • F
    User •

    Sono andato a dare un'occhiata al plugin WP Post Navigation che uso attualmente ma mi sembra che utilizzi la stessa "terminologia" :arrabbiato: no no devo riuscirci per forza a costo di perderci le ore guarda 😄

    0
  • F
    User •

    Questo il php del plugin (spero si possa postare, in caso lo cancello)

    <?php

/*Check Version*/
global $wp_version;
$exit_msg="WP Requires Latest version, Your version is old";
if(version_compare($wp_version, "3.0", "<"))
{
	exit($exit_msg);
}


if(!class_exists(WPPostNavigation)):
	class WPPostNavigation{
		function WP_Pre_Next_Navigation($content)
		{
			global $post;
			$options = $this->get_wp_post_navigation_options();
			if(is_single()){
				$navi = $options['nav_within_cat'] == "1"? true: false;
				$next_post = get_next_post($navi);
				$pre_post = get_previous_post($navi);
				if($options['navi_img'] != "1")
				{
					if($options['is_custom'] != "1"){
						$pre_navigation = $pre_post->ID!=""?'<a href="'. get_permalink($pre_post->ID).'">'.$pre_post->post_title.'</a>':'';
						$next_navigation = $next_post->ID!=""?'<a href="'. get_permalink($next_post->ID).'">'.$next_post->post_title.'</a>':'';
					}else{
						$pre_navigation = $pre_post->ID!=""?'<a href="'. get_permalink($pre_post->ID).'">'.$options['custom_pre'].'</a>':'';
						
						$next_navigation = $next_post->ID!=""?'<a href="'. get_permalink($next_post->ID).'">'.$options['custom_next'].'</a>':'';
					}
						
				}else{
					$pre_navigation = $pre_post->ID!=""?'<a href="'. get_permalink($pre_post->ID).'"><img src="'.$options['pre_img_link'].'" /></a>':'';
					$next_navigation = $next_post->ID!=""?'<a href="'. get_permalink($next_post->ID).'"><img src="'.$options['next_img_link'].'" /></a>':'';
				}
				$img = $options['navi_img'] == "1"? "-1": '';
				switch($options['position']){
						case "both":
							return '<div class="wp-post-navigation">
                                   <div class="wp-post-navigation-pre'.$img.'">
								   '.$pre_navigation.'
								   </div>
								   <div class="wp-post-navigation-next'.$img.'">
								   '.$next_navigation.'
								   </div>
                                </div>'.$content.'<div class="wp-post-navigation">
                                   <div class="wp-post-navigation-pre'.$img.'">
								   '.$pre_navigation.'
								   </div>
								   <div class="wp-post-navigation-next'.$img.'">
								   '.$next_navigation.'
								   </div>
                                </div>';
							break;
						case "top":
								return '<div class="wp-post-navigation">
                                   <div class="wp-post-navigation-pre'.$img.'">
								   '.$pre_navigation.'
								   </div>
								   <div class="wp-post-navigation-next'.$img.'">
								   '.$next_navigation.'
								   </div>
                                </div>'.$content;
							break;
						case "bottom":
							return $content.'<div class="wp-post-navigation">
                                   <div class="wp-post-navigation-pre'.$img.'">
								   '.$pre_navigation.'
								   </div>
								   <div class="wp-post-navigation-next'.$img.'">
								   '.$next_navigation.'
								   </div>
                                </div>';
							break;
				}
			}
			return $content;
		}
		
		function handle_wp_post_navigation_options()
		{
			$settings = $this->get_wp_post_navigation_options();
			if (isset($_POST['submitted']))
			{
				//check security
				check_admin_referer('wp-post-navigation-by-sharp-coders');
				$settings['nav_within_cat'] = isset($_POST['nav_within_cat'])? "1" : "0" ;
				$settings['position'] = isset($_POST['position'])? $_POST['position'] : "bottom" ;
				$settings['style'] = isset($_POST['style_css'])? $_POST['style_css'] : "" ;
				$settings['is_custom'] = isset($_POST['is_custom'])? "1" : "0" ;
				$settings['custom_pre'] = isset($_POST['custom_pre'])? $_POST['custom_pre'] : "" ;
				$settings['custom_next'] = isset($_POST['custom_next'])? $_POST['custom_next'] : "" ;
				$settings['navi_img'] = isset($_POST['navi_img'])? "1" : "0" ;
				$settings['pre_img_link'] = isset($_POST['pre_img_link'])? $_POST['pre_img_link'] : "" ;
				$settings['next_img_link'] = isset($_POST['next_img_link'])? $_POST['next_img_link'] : "" ;
				
				update_option("wp_post_navigation_options", serialize($settings));
				echo '<div class="updated fade"><p>Setting Updated!</p></div>';
			}
			$action_url = $_SERVER['REQUEST_URI'];
			include 'wp-post-navigation-admin-options.php';
		}


		function get_wp_post_navigation_options()
		{
			$options = unserialize(get_option("wp_post_navigation_options"));
			return $options;
		}
		function WP_Post_Navigation_install()
		{
			$options = array(
				'position' => 'bottom',
				'nav_within_cat' => '1',
				'style' => 'text-decoration: none;
font:bold 16px sans-serif, arial;
color: #666;',
				'is_custom' => '0',
				'custom_pre' => 'Previous Post',
				'custom_next' => 'Next Post',
				'navi_img' => '0',
				'pre_img_link' => '',
				'next_img_link' => '',
				
			);
			add_option("wp_post_navigation_options", serialize($options));
		}
		function wp_admin_menu()
		{
			add_options_page('WP Post Navigation', 'WP Post Navigation', 10, basename(__FILE__), array(&$this, 'handle_wp_post_navigation_options'));
		}


		function wp_post_navigation_stylesheet() {
			wp_register_style( 'wp-post-navigation-style', plugins_url('style.css', __FILE__) );
			wp_enqueue_style( 'wp-post-navigation-style' );
		}
		function wp_post_navigation_HeadAction()
		{
			$settings = $this->get_wp_post_navigation_options();
			echo '<style type="text/css">
					.wp-post-navigation a{
					'.$settings['style'].'
					}
				 </style>';
		}
	}
else:
	exit('WPPostNavigation Already Exists');
endif;


$WPPostNavigation = new WPPostNavigation();
if(isset($WPPostNavigation)){
	register_activation_hook(__FILE__, array(&$WPPostNavigation, 'WP_Post_Navigation_install'));
	add_filter('wp_head', array(&$WPPostNavigation, 'wp_post_navigation_HeadAction'));
	add_filter('the_content', array(&$WPPostNavigation, 'WP_Pre_Next_Navigation'));
	add_action('admin_menu', array(&$WPPostNavigation, 'wp_admin_menu'));
	add_action( 'wp_enqueue_scripts', array(&$WPPostNavigation, 'wp_post_navigation_stylesheet'));
}




?>
    0
  • F
    User •

    @FDA said:

    Ciao Franz22.
    Mettiamo a posto una cosa alla volta.
    Intanto la larghezza: la tua credo sia 620px, mentre io l'ho settato per 640px: devi rubare 10 px a sinistra e 10 px a destra. Prova a impostare nel CSS il width in npp-next e npp-previous a 268px.
    Passiamo al perché non va. Faccio tre ipotesi:

    1. Ti sei perso un div, aperto o chiuso, o comunque qualcosa del codice, un punto e virgola ... capita. A me spesso. Di solito me ne accorgo non prima di avere imprecato in tutte le lingue del mondo. 😄
    2. C'è un problema con l'editor/il testo del codice copiato/la codifica. Ti faccio l'esempio di:

    echo "<div class='npp-next'>";

    A volte l'editor fa cose strane con " (le virgolette) e ' (apostrofo).
    3) La versione di WordPress e/o, come tu ipotizzi, il template. Nota che get_permalink e get_the_title sono di WP.
    Dai, cerchiamo di farlo funzionare :arrabbiato: ... per soddisfazione! :bigsmile:
    F.

    Sto diventando matto :arrabbiato:
    Non capisco proprio perché non vada…è tutto esatto :arrabbiato:

    0
  • fda
    Moderatore •

    Ciao Franz22.
    Come già ti ho detto hai due possibilità:

    • lavorare sul mio codice, quindi capire perché a te non funziona;
    • usare il plugin che già avevi, ma applicando lo stile che vuoi tu e che potresti copiare dal codice che ti ho postato.
    0
Effettua l'accesso per rispondere