WordPress kujundus – Pisividinate korrastamine

Teemad

  • leheküljenumbrid
  • otsingu lehe vormindamine
  • 404  lehe vormindamine

Leheküljenumbrid

Kui me oma esilehel alla lõpuni kerime, siis näeme kahte linki – ‘eelmised’ või ‘järgmised’. Ja nii polegi meil arusaamist, mitu lehekülge postitusi siis on. WordPressis on täiesti selline võimalus olemas ja kasutatud on seda kujunduses ‘twentyfourteen‘. Avame selle teema kataloogi ja saelt ‘inc/template-tags.php‘. Seal on funktsioon nimega twentyfourteen_paging_nav(). Kopeerime selle kogu funktsiooni sisu ja asendame enda kujunduse samanimelise faili sisuga:

function wp_kujundus_paging_nav() {
	global $wp_query, $wp_rewrite;

	// Don't print empty markup if there's only one page.
	if ( $wp_query->max_num_pages < 2 ) {
		return;
	}

	$paged        = get_query_var( 'paged' ) ? intval( get_query_var( 'paged' ) ) : 1;
	$pagenum_link = html_entity_decode( get_pagenum_link() );
	$query_args   = array();
	$url_parts    = explode( '?', $pagenum_link );

	if ( isset( $url_parts[1] ) ) {
		wp_parse_str( $url_parts[1], $query_args );
	}

	$pagenum_link = remove_query_arg( array_keys( $query_args ), $pagenum_link );
	$pagenum_link = trailingslashit( $pagenum_link ) . '%_%';

	$format  = $wp_rewrite->using_index_permalinks() && ! strpos( $pagenum_link, 'index.php' ) ? 'index.php/' : '';
	$format .= $wp_rewrite->using_permalinks() ? user_trailingslashit( $wp_rewrite->pagination_base . '/%#%', 'paged' ) : '?paged=%#%';

	// Set up paginated links.
	$links = paginate_links( array(
		'base'     => $pagenum_link,
		'format'   => $format,
		'total'    => $wp_query->max_num_pages,
		'current'  => $paged,
		'mid_size' => 1,
		'add_args' => array_map( 'urlencode', $query_args ),
		'prev_text' => __( '&larr; Previous', 'twentyfourteen' ),
		'next_text' => __( 'Next &rarr;', 'twentyfourteen' ),
        'type'      => 'list',
	) );

	if ( $links ) :

	?>
	<nav class="navigation paging-navigation" role="navigation">
		<h1 class="screen-reader-text"><?php _e( 'Posts navigation', 'twentyfourteen' ); ?></h1>
		<div class="pagination loop-pagination">
			<?php echo $links; ?>
		</div><!-- .pagination -->
	</nav><!-- .navigation -->
	<?php
	endif;
}

Kopeeri julgelt antud kood siit. Lisasin siia ühe täienduse ‘type’ => ‘list’, mis teeb leheküljenumbrid loendiks. Ja loendit on lihtsam CSS’is kujundada. Ja lõpuks muudame leheküljenumbrite tausta valgeks, mis ühtib üldse kujundusega.

/*--------------------------------------------------------------
10.6 paging
--------------------------------------------------------------*/

.paging-navigation ul {
    margin: 0;
}

.paging-navigation li { display: inline; }

a.page-numbers,
span.page-numbers {
     padding: .3em .7em;
     color: #333;
}

a:hover.page-numbers {
    color: #000;
}

.paging-navigation .current {
    font-weight: bold;
    color: #000;
}

.paging-navigation {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    list-style-type: none;
    background: #fff;
}  

Otsingu lehe vormindamine

Sisestades otingusõna leitakse vastus aga vormindus on täitsa paigast ära.

WordPress kasutab otingute jaoks lehte search.php, kus on kirjas, et positiivse vastuse korral kasutatakse content-search.php paigutust. Kõige lihtsam on võtta content.php sisu ja kopeerida see content-search.php asemele.

Kui vastust ei leita, siis on jälle kujundus paigast ära, sest negatiivse tulemuse puhul kasutatakse content-none.php faili. Siin päris content.php sisu ümber kopeerida ei saa ja seepärast täiendame seda käsitsi. Kõigepealt lisame sisu class=”index-box” konteinerisse. Seejärel muudame klassi nimed nagu näiteks page-header, page-title ja page-content vastavalt eesliitega entry-

<section class="no-results not-found">
<div class="index-box">
	<header class="entry-header">
		<h1 class="entry-title"><?php _e( 'Nothing Found', 'wp-kujundus' ); ?></h1>
	</header><!-- .entry-header -->

	<div class="entry-content">
...

See teeb suurema osa tööst ära.

404 lehe vormindamine

Jäänud on veel viimane leht, mis kuvab veateate, kui keegi on aadressi valesti sisestanud.

Siin teeme sama triki, mis enne –  lisame sisu class=”index-box” konteinerisse ja muudame klasside page- liite entry- liiteks. Ja millegipärast, on nad 404 lehelt eemaldanud külgriba – lisame selle tagasi (lisa lõppu enne jalust).

<?php get_sidebar(); ?>

Värsked pistitused ja enimloetud pealkirjad on natuke pealetükkivad ja ühel joon all. Teeme need korda:

.widget h2{
    padding-bottom: 10px;
    border-bottom: none;
}

Järgmises peatükis teeme erineva disainiga lehe, mis ei ühti üldise disainiga (custom page).

Viimased postitused

Meist

metshein.com on pakkunud juba üle kümne aasta tasuta eestikeelseid infotehnoloogiaga seotud kursusi. Sama kurssi püütakse järgida ka edaspidi. Eesmärk muuta arvutiõpe võimalikult lihtsaks!

metshein.com: parim eestikeelne koolitusportaal

Autorist ja kontakt: kliki siia

Kontrolli tunnistust

Tööribale