WordPress – datum ve smyčce

Pokud chcete zobrazovat datum u příspěvku a použijete v šabloně následující kod:

the_date();

pak se Vám u některých článků datum nezobrazí.

ŘEŠENÍ
Je lepší využít funkce the_time():

the_time('F j, Y');

Modifikace wp_list_categories

Často potřebuji upravovat některé funkce z jádra wordpressu. Není dobré upravovat přímo funkce v jádru, po aktualizaci se Vám změny pravděpodobně ztratí.

Ideální je funkce jádra modifikovat v šabloně a to v souboru function.php.

Níže uvádím ukázku odstranění atributů v kategoriích:

 

<?php
function categories_without_title_attribute() {
$categories = wp_list_categories('echo=0');
$categories = preg_replace('/title="(.*?)"/','',$categories);
echo $categories;
}
?>

Užitečné tipy pro wordpress

Seznam užitečných tipů, které usnadní práci a vývoj v redakčním systému wordpress:

Shortcode
Lze využít pro uživatelské vkládání nejrůznějšího obsahu přímo do postu, stránek.
Nejdříve si v souboru function.php vytvoříme a zaregistrujeme libovolnou funkci, kterou chceme aplikovat a vložit do článku.

function hello() {
    return 'Hello, World!';
}
 
add_shortcode('nase_fce', 'hello');

Následně můžeme naši fci volat při tvorbě příspěvku:

[nase_fce]

Interakce s DB

Získání záznamů:

<!--?php    $posts = $wpdb--->get_results("SELECT ID, post_title FROM wp_posts WHERE post_status = 'future'
   AND post_type='post' ORDER BY post_date ASC LIMIT 0,4")
 
   // Echo the title of the first scheduled post
   echo $posts[0]-&gt;post_title;
?&gt;

Získání řádku:

<!--?php    $posts = $wpdb--->get_row("SELECT ID, post_title FROM wp_posts WHERE post_status = 'publish'
   AND post_type='post' ORDER BY comment_count DESC LIMIT 0,1")
 
   // Echo the title of the most commented post
   echo $posts-&gt;post_title;
?&gt;

Získání sloupce:

<!--?php    $posts = $wpdb--->get_col("SELECT ID FROM wp_posts WHERE post_status = 'publish'
   AND post_type='post' ORDER BY comment_count DESC LIMIT 0,10")
 
   // Echo the ID of the 4th most commented post
   echo $posts[3]-&gt;ID;
?&gt;

Získání konkrétní hodnoty:

<!--?php    $email = $wpdb--->get_var("SELECT user_email FROM wp_users WHERE user_login = 'danielpataki' ")
 
   // Echo the user's email address
   echo $email;
?&gt;

Vložení dat do DB:

$wpdb-&gt;insert( $table, $data, $format);

Vložení dat do DB ukázka:

<!--?php    $wpdb--->insert($wpdb-&gt;usermeta, array("user_id" =&gt; 1, "meta_key" =&gt; "awesome_factor", "meta_value" =&gt; 10), array("%d", %s", "%d"));
 
   // Equivalent to:
   // INSERT INTO wp_usermeta (user_id, meta_key, meta_value) VALUES (1, "awesome_factor", 10);
?&gt;

Update dat v DB

$wpdb-&gt;update( $table, $data, $where, $format = null, $where_format = null );

Update dat v DB ukázka:

$wpdb-&gt;update( $wpdb-&gt;posts, array("post_title" =&gt; "Modified Post Title"), array("ID" =&gt; 5), array("%s"), array("%d") );

Vložení vlastního loga na loginpage

add_action( 'login_head', 'ilc_custom_login');
function ilc_custom_login() {
	echo '<style type="text/css">
	h1 a { background-image:url('. get_stylesheet_directory_uri() . '/images/login-logo.png' . ') !important; margin-bottom: 10px; }
	padding: 20px;}
	</style>
	<script type="text/javascript">window.onload = function(){document.getElementById("login").getElementsByTagName("a")[0].href = "'. home_url() . '";document.getElementById("login").getElementsByTagName("a")[0].title = "Go to site";}</script>';
}

Změna počtu skov v excerpt funkci

add_filter('excerpt_length', 'ilc_excerpt_length');
function ilc_excerpt_length( $length ){
	return 10;
}

WordPress – pár užitečných triků pro vykreslování smyček s posty

Posty publikované mezi daty
Chcete-li zobrazit posty vytvořené v určitém časové rozmezí, použijte následující smyčku:

<!--?php
    function filter_where($where = '') {
          $where .= " AND post_date -->= '2012-04-18' AND post_date &lt;= '2012-05-01'";
     return $where;
   }
 add_filter('posts_where', 'filter_where');
 query_posts($query_string);
 while (have_posts()) :
       the_post();
       the_content();
 endwhile;
 ?&gt;

Posty s náhledem prvního obrázku v článku
Nejdříve si do souboru function.php vložíme funkci, která nám vrátí link na první obrázek v článku:

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//i', $post-&gt;post_content, $matches);
  $first_img = $matches [1] [0];
 
  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

Následně můžeme naší fci volat ve smyčce:

<!--?php
  if (have_posts()) :
      while (have_posts()) : the_post(); ?-->
        <a class="img-loop" title="&lt;?php the_title(); ?&gt;" href="&lt;?php the_permalink();?&gt;">
        <img src="http://www.remake.cz/blog/wp-content/uploads/images/&lt;?php echo catch_that_image() ?&gt;" alt="&lt;?php the_title(); ?&gt;" />
        </a>
    endwhile;
endif;
?&gt;

WordPress debugging

Při vytváření šablon a pluginů pro wordpress je dobré mít zapnutý debugging, který je standardně vypnutý v souboru wp-config.php. Viz ukázka:

wp-config.php

define('WP_DEBUG', false);

Zapnout debugging je velice jednoduché, stačí v wp-config.php přepsat zmiňovaný řádek následujícím kódem:

// Turns WordPress debugging on
define('WP_DEBUG', true);
 
// Tells WordPress to log everything to the /wp-content/debug.log file
define('WP_DEBUG_LOG', true);
 
// Doesn't force the PHP 'display_errors' variable to be on
define('WP_DEBUG_DISPLAY', false);
 
// Hides errors from being displayed on-screen
@ini_set('display_errors', 0);

Následně můžete využívat a nahlížet do souboru wp-content/debug.log.

Přidání widgetů do šablony.

Nejdříve widgety zaregistrujeme:

<?php
	register_sidebar( array(
		'name' => 'left-sidebar',
		'id' => 'left-sidebar',
		'before_widget' => '<div id="%1$s" class="%2$s widget">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>'
	) );
	register_sidebar( array(
		'name' => 'right-sidebar',
		'id' => 'right-sidebar',
		'before_widget' => '<div id="%1$s" class="%2$s widget">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>'
	) );
?>

Následně vložíme na potřebné místo v šabloně:

<?php if (!dynamic_sidebar("left-sidebar") ) : ?>
Default left sidebar stuff here…
<?php endif; ?>
 
<?php if (!dynamic_sidebar("right-sidebar") ) : ?>
Default right sidebar stuff here…
<?php endif; ?>

Vlastní šablona pro WordPress – díl 1. – Úvod

Dnes bych zde rád začal mini seriál, který bude sloužit pro začínající tvůrce šablon v redakčním systém WordPress a také jako postup, který si musím čas od času oprášit. Jistě už se vám také stalo, že se něco naučíte, dlouho nevyužíváte a posléze zapomenete. To je i můj případ a tento seriál by mě i vám měl oživení usnadnit.

Tedy začněme!

Vytvořit šablonu není nikterak složité. Stačí si ve složce ,kde máte nainstalován Wordpres (dále budu psát jen zkráceně WP) v adresáři wp-content/themes přidat adresář se jménem naší šablony. V tomto našem adresáři budou uloženy všechny potřebné soubory, které popíšu v dalším textu. Tedy v mém případě bude adresářová struktůra takováto:

mywordpress/wp-content/themes/mytheme

mywordpress je adresář, kde mám naintalovaný WP, tento může být pro každého rozdílný, záleží kde máte WP instalovaný.

Dalším krokem je vytvoření základních povinných souborů šablony. Tyto budou umístěny v naší složce šablony. Pro základní funkčnost šablony jsou zapotřebí jen dva soubory index.php a style.css. Dále je dobré do naší šablony vložit náhled šablony, který se bude zobrazovat v administraci při volbě šablony. Tento soubor nazveme screenshot.png a ideálně by měl mít rozměry 300px x 225px. To byly základní povinné soubory, ale WP má mnoho možností a šikovných funkcí, které by byla škoda nevyužít. Proto je dobré vytvořit i další soubory, které popíšu v následujících dílech seriálu.

Nyní se vraťmě k základním povinným souborů šablony a jejich obsahu.

Otevřeme si soubor style.css pro editaci a na úvod do něj vložíme informace o naší šabloně. Je dobrou zvyklostí používat následující zápis.

Soubor style.css:

/*
Theme Name: My Theme
Theme URI: http://www.mytheme.cz/
Description: Popis šablony
Author: Vaše jméno
Author URI: http://www.myhomepage.cz
Template: mytheme
Version: 0.1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header
License:
License URI:
*/

Předem je třeba říci, že povinný je pouze parametr Template, kde je název adresáře s vaší šablonou. Tento název je case-sensitive (čili je rozdíl mezi malými a velkými písmeny).
Theme name je jméno vaší šablony.
Theme URI je adresa vaší šablony pro stažení.
Description popisuje šablonu, je to krátké info,které vystihuje některé rysy šablony.
Author je část určená především vám jakožto autoru šablony 😉
Author URI je adresa stránek autora šablony.
Template jedinný povinný parametr.
Version verze šablony.
Tags tagy šablony.
License druh licence šablony.
License URI adresa licence.

Dále je dobré do šablony vložit základní styl, který je ve WP přednastaven u některých částí. Styl si můžete přizpůsobit dle vaší šablony, ale je dobré jej nevynechat. Do souboru style.css přidejte následující kód.

Soubor style.css:

/* WordPress Core
-------------------------------------------------------------- */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
display:block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float:left;
margin: 5px 20px 20px 0;
}
.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
a img.alignright {
float:right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float:left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin:0;
max-width: 98.5%;
padding:0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

Základní nastavení stylu a informací o šabloně máme hotovo. Nyní je čas přejít k vlastní tvorbě layoutu.

Otevřeme si soubor index.php a vložíme do něj následující kód.
Soubor index.php:

<!DOCTYPE html>
<head>  
  <meta charset="<?php bloginfo( 'charset' ); ?>" />  
  <title> 
    <?php	bloginfo( 'name' );	?>
  </title>  
  <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />  
  <?php	wp_head(); ?>
</head>
<body>  
  <div id="wrapper">    
    <div id="header"><h1>
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <?php wp_list_pages('title_li=' ); ?>
    </div>			      
    <div id="sidebar">		
      <ul>			
        <?php 	/* Widgetized sidebar, if you have the plugin installed. */
        					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>			
        <li><h2>Archives</h2>				
        <ul>				
          <?php wp_get_archives('type=monthly'); ?>				
        </ul>			
        </li>			
        <?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>			
        <?php wp_list_bookmarks(); ?>				
        <?php endif; ?>		
      </ul>    
    </div>    
    <div id="content">           
      <?php if (have_posts()) : ?> 		            
      <?php while (have_posts()) : the_post(); ?>  			            
      <div class="post" id="post-<?php the_ID(); ?>">				<h2>                   
          <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">                        
            <?php the_title(); ?></a></h2>				<small>                   
          <?php the_time('F jS, Y') ?>                      
          <!-- by <?php the_author() ?> --></small>				                
        <div class="entry">					                    
          <?php the_content('Read the rest of this entry &raquo;'); ?>  				                
        </div>				            
      </div>		            
      <?php endwhile; ?>  		            
      <?php else : ?>  		            
      <h2 class="center">Not Found</h2>		            
      <p class="center">Sorry, but you are looking for something that isn't here.            
      </p>		            
      <?php endif; ?>       
    </div>    
    <div id="footer">Zde je patička
    </div>       
  </div>
</body>
</html>

Do souboru style.css přidáme následující kód:

/*  My Layout
-------------------------------------------------------------------*/
#wrapper {width: 980px; margin: 0px auto; border: 1px solid #1f1f1f;}
#header {background-color: #1f1f1f; color: #f0f0f0; padding: 10px;}
#sidebar {padding: 10px; float: left;}
#content {padding: 10px; float: left; border-left: 1px solid #1f1f1f;}
#footer {background-color: #1f1f1f; color: #f0f0f0; padding: 10px; clear: both;}
 
/*  My Style
-------------------------------------------------------------------*/
* {color: #1f1f1f;}
body {background-color: #f0f0f0; font: 12px Arial;}
#header h1 a {color: #f0f0f0; font-size: 14px; font-weight: bold;}
 
#header li {display: inline; list-style-type: none; text-align: left;}
#header li a {text-decoration: none; color: #fff;}

Základní soubory máme hotové, ale WP nám umožňuje si soubor index.php rozdělit na více částí. Náše šablona se stane přehlednější. Do souboru index.php zapíšeme následující kód:

Soubor index.php:

<?php get_header(); ?>
 
<?php get_sidebar(); ?>
 
    <div id="content">           
      <?php if (have_posts()) : ?> 		            
      <?php while (have_posts()) : the_post(); ?>  			            
      <div class="post" id="post-<?php the_ID(); ?>">				<h2>                   
          <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">                        
            <?php the_title(); ?></a></h2>				<small>                   
          <?php the_time('F jS, Y') ?>                      
          <!-- by <?php the_author() ?> --></small>				                
        <div class="entry">					                    
          <?php the_content('Read the rest of this entry &raquo;'); ?>  				                
        </div>				            
      </div>		            
      <?php endwhile; ?>  		            
      <?php else : ?>  		            
      <h2 class="center">Not Found</h2>		            
      <p class="center">Sorry, but you are looking for something that isn't here.            
      </p>		            
      <?php endif; ?>       
    </div>
<?php get_footer(); ?>

V části get_header(); je definovaná hlavička, tedy deklarace typu,meta informace, title a může i obsahovat základní div (může, ale nemusí, div může být i přímo v souboru index.php, hlavně nesmíme zapomenout náš div uzavřít, je jedno jestli v souboru index.php nebo v footer.php, divy se hlavně nesmí křížit a musejí být uzavřené).

Soubor header.php:

<!DOCTYPE html>
<head>  
  <meta charset="<?php bloginfo( 'charset' ); ?>" />  
  <title> 
    <?php	bloginfo( 'name' );	?>
  </title>  
  <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />  
  <?php	wp_head(); ?>
</head>
<body>  
  <div id="wrapper">    
    <div id="header"><h1>
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
        <?php wp_list_pages('title_li=' ); ?>
    </div>

Dále načítáme příkazem get_sidebar(); soubor sidebar.php ,ve kterém je umístěno například menu nebo další funkcionality.

Soubor sidebar.php:

    <div id="sidebar">		
      <ul>			
        <?php 	/* Widgetized sidebar, if you have the plugin installed. */
        					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>			
        <li><h2>Archives</h2>				
        <ul>				
          <?php wp_get_archives('type=monthly'); ?>				
        </ul>			
        </li>			
        <?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>			
        <?php wp_list_bookmarks(); ?>				
        <?php endif; ?>		
      </ul>    
    </div>

A v poslední řadě načítáme soubor patičky footer.php, kde je ukončení šablony.

Soubor footer.php:

    <div id="footer">Zde je patička
    </div>       
  </div>
</body>
</html>

Nyní máme základ naší šablony hotov. WP však nabízí spoustu užitečných funkcí a možností, které můžeme do šablony implementovat. Můžeme napsat šablonu pro kategorie, stránky, komentáře a mnoho dalších a v neposlední řadě šablonu nastylujeme.

Pokud se vám z jakéhokoliv důvodu nechce zde uvedené zdrojové kódy kopírovat a přepisovat, máte možnost si dnes vytvořené soubory uložit. exampletheme.zip (35 kB)

Věřím, že vám seriál bude nápomocen a ušetří vám mnoho strastiplných chvil. Těším se na případné komentáře a plodnou debatu.

V dalším díle si popíšeme vlastnosti a funkce dalších souborů, ketré můžeme v naší šabloně využít.