Jak vypsat příspěvky ve WordPress?

Ve WordPress můžeme zobrazit příspěvky hned několika různými způsoby. S pomocí standardního loopu, dále pak s query_posts(), get_posts() a WP_Query(). V dnešním příspěvku se seznámíme se základy WP Query, a představíme si základní atributy funkce.

Atributy WP Query

Celý kód je přitom docela jednoduchý. Máme tu proměnnou s polem, v němž si zadáváme jednotlivé parametry funkce.

<?php 
$my_custom_query = new WP_Query( array(   
'cat' => 27, 
'post_type' => array( 'post' ),
'post_status'=>'publish', 
'posts_per_page'=>4, 
'order' => "ASC" ));
while($my_custom_ query ->have_posts()) : $my_custom_ query ->the_post(); 
?>

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata();?>

Teď si kód projdeme pěkně popořadě.

$my_custom_ query

Název naší proměnné, která do sebe ukládá hodnoty WP Query. Můžeme si ji pojmenovat jak chceme. Důležité je přitom, ji přepsat v celém kódu, jinak to nebude fungovat.

'cat'

Toto je atribut, který zadáváme v případě, že chceme vypsat třeba články, ale jen v určité kategorii příspěvků. Zadává se ID, což je číselná identifikace rubriky, resp. Kategorie. Nutno podotknout, že ve výchozím seznamu kategorií nevidíme číslo rubriky.  Číslo rubriky můžeme získat pomocí pluginu Catch IDs .

'post_type' => array( 'post' )

Tento atribut říká WordPressu, jaký post type má zobrazovat. Ano, je jich víc, a konec konců můžeme vytvářet i vlastní post typy, ale o tom třeba někdy příště. Pokud budeme chtít vypsat příspěvky, tak necháme post. Pokud stránky, tak zadáme page.

'posts_per_page'=> 4,

Atribut zadává, kolik příspěvků bude na stránce. Standardně pro zobrazení všech příspěvků se zapisuje hodnota -1. Pokud chceme zobrazit například 4 články na stránku, tak zapíšeme 4, nebo jiné konkrétní číslo.

'order' => "ASC"

Atribut pro řazení článku. Jsou dvě možnosti. Buď chronologicky ASC anebo od nejstaršího po nejnovější DESC. Jaké pořadí zvolíte, záleží jen na Vás. Pak také existují pluginy, s jejichž pomocí si můžete články libovolně přeházet. Stačí v repozitáři pluginů ve Vaší administraci hledat klíčové slovo order.

Zobrazení v šabloně

Tím máme vyřešenou funkcionalitu zobrazování článků. Nicméně aby byl článek či stránka vidět, musíme WordPressu nějakým způsobem říct, co má zobrazovat. Článek většinou sestává z několika částí, resp. nadpisu (titulku) a obsahu článku. Tyto části vypíšeme opět vložením do zdrojového kódu.

<?php the_permalink(); ?>
je funkce, která předává adresu konkrétního článku.
<?php the_title(); ?>
  – titulek článku.
<?php the_content(); ?>
obsah článku

Pak jsou ještě další komponenty článku, jako náhledový obrázek atp. O nich si povíme v dalších článcích. Budu ráda za komentář a za sdílení. Děkuji a přeji hezký zbytek víkendu.

Jak vypsat seznam kategorií ve WooCommerce?

Do souboru content.php, eventuelně content-page.php, content-single.php  a podobně, podle toho, kde chcete výpis kategorií zobrazovat, vložíme následující kus kódu:

<?php
// DEFINE VARIABLES
$wcatTerms = get_terms('product_cat', array('hide_empty' => 0, 'orderby' => 'ASC',  'parent' =>0)); //, 'exclude' => '17,77'
foreach($wcatTerms as $wcatTerm) : 
$wthumbnail_id = get_woocommerce_term_meta( $wcatTerm->term_id, 'thumbnail_id', true );
$wimage = wp_get_attachment_url( $wthumbnail_id );
?>

<!-- DISPLAYING CATEGORIES LIST -->
<ul>
<a href="<?php echo get_term_link( $wcatTerm->slug, $wcatTerm->taxonomy ); ?>"><?php echo $wcatTerm->name; ?></a>

<ul class="wsubcategs">
<?php
   $wsubargs = array(
   'hierarchical' => 1,
   'show_option_none' => '',
   'hide_empty' => 0,
   'parent' => $wcatTerm->term_id,
   'taxonomy' => 'product_cat'
   );

$wsubcats = get_categories($wsubargs);
foreach ($wsubcats as $wsc):
?>

<li><a href="<?php echo get_term_link( $wsc->slug, $wsc->taxonomy );?>"><?php echo $wsc->name;?></a></li>
<?php endforeach; ?>  
</ul>
</ul>
<?php endforeach; ?>

ŽÁDÁM SI NÁPADY K FRAMEWORKU. DĚKUJI.

Je to pár týdnů, co jsem publikovala poslední příspěvek. Ne, na vavřínech jsem ještě neusnula. Věnuji se časově docela náročným věcem. Ale mám v plánu více psát na blog. A tak bych se s Vámi ráda podělila o novinky.

Skloubit zájmy a práci není v mém případě jednoduché. Dělám na recepci 14 hodin v tahu, a pak přijdu domů a jdu spát. Když však mám chvilku čas, věnuji ji WordPressu, a v neposlední řadě práci na své WordPress šabloně, Lype frameworku. Bude to naprosto univerzální šablona. Půjde s ní nastavit snad úplně vše, na co si jen vzpomenete. Dala jsem si jeden cíl.

Aby s ní šlo postavit web do hodiny. Ano, slyšíte správně. A není to vůbec snadné. Ale pokroky jsou. Minulý týden jsem měla nějaké to volno, a nakódovala jsem toho daleko více, než za poslední rok. Minimálně framework umí měnit barvy, a bude umět měnit barvy i u přichystaných elementů, jako jsou widgety s referencemi zákazníků, widgety se členy týdnů, a tak dále a tak dále. Bude daleko víc přizpůsobitelnější než je MioWeb.

Dostala jsem možnost si MioWeb vyzkoušet, není špatný, ale já osobně bych některé věci udělala jinak. Možná jednodušeji, možná bych něco umazala… Ale o tom dnešní příspěvek není.

Budu velice ráda, pokud mi napíšete, co Vám třeba ve Vaší šabloně pro WP chybí. Teď hlavně potřebuju vazbu od budoucích uživatelů, pro které to všechno dělám. Budu se těšit na zpětnou vazbu od Vás, aby byl Lype co možná nejlepší.

 

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 '&lt;meta property="fb:admins" content="YOUR USER ID"/&gt;';
        echo '&lt;meta property="og:title" content="' . get_the_title() . '"/&gt;';
        echo '&lt;meta property="og:type" content="article"/&gt;';
        echo '&lt;meta property="og:url" content="' . get_permalink() . '"/&gt;';
        echo '&lt;meta property="og:site_name" content="Your Site NAME Goes HERE"/&gt;';
  if(!has_post_thumbnail( $post-&gt;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 '&lt;meta property="og:image" content="' . $default_image . '"/&gt;';
  }
  else{
    $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'medium' );
    echo '&lt;meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/&gt;';
  }
  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!