Jak vyčistit menu od zbytečných tříd a identifikátorů?

Milí čtenáři,
dnes jsem si pro Vás připravila kraťounký návod na úpravu menu na Vašich webových stránkách postavených na skvělém redakčním systému WordPress. Zdrojový kód jsem našla na webu http://wordpress.stackexchange.com/questions/12784/wp-nav-menu-remove-class-and-id-from-li, a nyní bych jej chtěla zprostředkovat pro české uživatele WordPressu.

Na úvod se zeptám:

Proč vůbec odebírat třídy a identifikátory menu?

Především jde o to, že ve výchozím zdrojovém kódu menu se nachází spousta tříd. Jen si ho prohlédněte:

puvodni-kod-menu-min

Zaměřte svou pozornost především na elementy li, kde jsou následující třídy: menu-item, menu-item-post_type, menu-item-object-page a menu-item-118. Z těchto všech tříd bych v nejnutnějším případu ponechala tu poslední, ovšem k tomu není důvod, když je pro tento element použitý identifikátor menu-item-{číslo položky menu}. Z toho důvodu považuji za vhodné zbavit se uvedených tříd.

Co budeme potřebovat?

Postačí jakýkoliv libovolný textový editor – já používám Atom, v němž mám nainstalovaný modul, který mi našeptává jednotlivé funkce pro WordPress, dále pak soubor functions.php, a v neposlední řadě onen opěvovaný zdrojový kód, který nám zajistí požadovanou funkcionalitu.  Otevřete složku se šablonou, vyhledejte soubor functions.php, a do něj zkopírujte celý tento zdrojový kód.


add_filter('nav_menu_item_id', 'clear_nav_menu_item_id', 10, 3);

function clear_nav_menu_item_id($id, $item, $args) {

return „“;

}

 

add_filter(‚nav_menu_css_class‘, ‚clear_nav_menu_item_class‘, 10, 3);

function clear_nav_menu_item_class($classes, $item, $args) {

return array();

}

 

Následně soubor uložte. K souboru functions.php můžete přistupovat i z Vaši WordPress administrace přímo na webu. Toto je možná lepší řešení pro ty uživatele, kteří neumí pracovat s FTP klientem. Takže si otevřete Vaší administraci -> Vzhled -> Šablony -> Editor. V menu vpravo vyberte soubor Functions, vizte na následujícím obrázku:

nahled-upravy-kodu-ve-wp-min

Do textového pole úplně nakonec vložte uvedený kus kódu, a soubor uložte.

To je celé.

Doufám, že se Vám článek líbil, a přeji hezkou neděli.

Jak vložit do hlavičky webu tagy open graph protokolu?

Předtím než se pustíme do samotné integrace Facebooku na web, je nezbytné dostat do hlavičky meta tagy s open graph protokolem. Na to stačí do souboru functions.php v šabloně vložit jednoduchou funkci, a sice:


//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');
//Lets add Open Graph Meta Info

function insert_fb_in_head() {
	global $post;
	if ( !is_singular()) //if it is not a post or a page
		return;
        echo '<meta property="fb:admins" content="YOUR USER ID"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>';
	if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
		$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

Tento kus kódu je přejatý z webu http://www.wpbeginner.com/wp-themes/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes/, aby mohl být k dispozici i českým uživatelům skvělého redakčního systému WordPress!

Vzniká lype theme

Milí čtenáři,

v dnešním příspěvku bych Vám ráda oznámila, že ode dneška budu svoje nové šablony publikovat pod svoji osobní značkou Lype theme. Ly jako Lýdie a pe jako Pehalová. K nahlédnutí je též i hotové logo, které jsem vytvořila pro svoje šablony.

lype-logo2

Jak vytvořit polygonální pozadí na webu?

Co si pod pojmem polygonální pozadí máte vlastně vůbec představit? Je to pozadí, které sestává zejména z různě uspořádaných trojúhelníků. Je to jeden z trendů poslední doby, co se designu týče. Vypadá to přibližně jako na obrázku v hlavičce na mém webu, ale existují různé varianty tohoto typu pozadí, jako například v hlavičce na mém webu.

Toto pozadí jsem vytvořila s pomocí jednoduchého generátoru tohoto typu pozadí. Jde o web https://qrohlf.com/trianglify-generator/