Criar Blog

Ativar ou desativar híven automático nos textos html do WordPress

Esse código [hyphens] ajuda bastante, ele habilita no browser a hifenização automática de acordoLayout Responsivo, sendo assim o texto se adequa ao espaço e as palavras recebem separação com hífen automaticamente e mantém a leitura correta do texto.

com a linguagem (pt_BR, en, etc) e isso melhora a visualização dos textos quando se usa

Para que funcione corretamente em todos os browser, será necessário inserir em seu CSS o seguinte código:

body {

-webkit-hyphens: auto;

-moz-hyphens: auto;

-ms-hyphens: auto;

hyphens: auto;

}

Neste caso coloquei no BODY para tornar todos os elementos de texto responsivos, porém você pode colocar apenas no elemento de paragrafo [ p ], existem outros parâmetros que podem ser utilizados leia a documentação do HYPHENS, caso necessário. http://dev.w3.org/csswg/css-text/#hyphens

Exibir imagem padrão quando não ouver imagem destaque no Wordpress

Utilize o código abaixo par mostrar uma imagem padrão no thumbnail dos posts do wordpress:

<?php if ( has_post_thumbnail() ) the_post_thumbnail( 'medium' );
         else
         echo '<img src="'.get_bloginfo('template_url').'/images/padrao-sem-imagem.png" alt="'.get_the_title().'" />';
       ?>

Mostrar postagens por tags no Wordpress sem Plugin

Use o código abaixo para mostrar postagens relacionadas por tags:

     <?php
    $tags = wp_get_post_tags($post->ID);
    if ($tags) {
     $tag_ids = array();
     foreach($tags as $individual_tag)
      $tag_ids[] = $individual_tag->term_id;

     $args=array(
      'tag__in' => $tag_ids,
      'tag__not_in' => array(31,344), //Tags a ignorar.
      'post__not_in' => array($post->ID), //Ignorar postagem da pagina.
      'showposts'=>4, // Numero de posts a mostrar.
      'caller_get_posts'=>1
     );
     $my_query = new wp_query($args);
     if( $my_query->have_posts() ) {
      echo '<div class="sua class">';
      while ($my_query->have_posts()) {
       $my_query->the_post(); ?>

            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php if ( has_post_thumbnail() ) the_post_thumbnail( 'medium' );
         else
         echo '<img src="'.get_bloginfo('template_url').'/images/padrao-sem-imagem.png" alt="'.get_the_title().'" />';
       ?>
            <?php the_title(); ?></a>

      <?php }
      echo '</ul></div>';
     }
    }
   ?>

Anuncio dentro da postagem no Wordpress sem Plugin

1- Abra o arquivo functions.php do seu tema e adicione o seguinte código

function content_ads_dentro($content) {
// only do this if post is longer than 1000 characters
$enable_length = 1000;
// insert after the first </p> after 500 characters
$after_character = 400;
if (is_single() && strlen($content) > $enable_length) {
    $before_content = substr($content, 0, $after_character);
    $after_content = substr($content, $after_character);
    $after_content = explode('</p>', $after_content);
    $text = '
       Código do seu anuncio aqui    ';
    array_splice($after_content, 1, 0, $text);
    $after_content = implode('</p>', $after_content);
    return $before_content . $after_content;
}
else {
    return $content;
}
}
add_filter('the_content', 'content_ads_dentro');

2 - Perceba no código acima o local onde vai colocar seu anuncio.

Contador de Visualizações no Wordpress sem plugin

1 - Abra o Arquivo functions.php do tema e adiciona e Seguinte Código.

function conta_clicks($post_id){
   return (int)get_post_meta($post_id, 'conta_clicks_clicks', true);
}
function conta_clicks_update_clicks($content){
   global $post;
   $post_id = $post->ID;
   if(is_single()){
       $total = (int)conta_clicks($post_id);
       $total++;
       update_post_meta($post_id, 'conta_clicks_clicks', $total);
   }
   return $content;
}
add_filter('the_content', 'conta_clicks_update_clicks');

2 - Agora adicione em qualquer parte do tema o código abaixo que irá mostrar a numeração.

Visualizações do post <?php echo conta_clicks($post->ID); ?>

Pronto irá funcionar direitinho.

3 - (opcional) Adicionar opção shortcode do Contador no Tema

function conta_clicks_shortcode($attr,$cont){
 
 global $post;
 
 $post_id = $post->ID;
 
 return get_post_meta($post_id, 'conta_clicks_clicks', true);
 
}
add_shortcode('total_clicks','conta_clicks_shortcode');

Shortcode a ser utilizado [total_clicks]

Como Numerar Post no WordPress

Vamos editar o arquivo da página de post, no exemplo, ela se encontra em /wp-content/themes/nome-do-seu-tema/ e tem o nome de page-post-numerada.php caso você não saiba, nesse tutorial eu ensino detalhadamente como criar uma página de post.

Antes do inicio do loop que chama os posts da página, vamos criar uma variável contador, que tem valor 1, e ficará assim:

<?php $contador = 1 ?>

O inicio do seu loop WordPress deve ficar mais ou menos assim:


<?php query_posts('cat=1');?>
<?php $contador = 1 ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

No exemplo, pra eu numerar Post WordPress, eu coloquei a numeração antes do título do post, então agora vamos colocar a variável contador com incremento ++ pra adicionar +1 a cada post. O código do titulo do post, ficou mais ou menos assim:

<h1><a class="tituloPost" href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>">
<?php echo $contador++ . '.'; ?> <?php the_title(); ?>
</a>
</h1>

O CSS do exemplo de como numerar Post WordPress, é bem simples e o código ficou assim:

.tituloPost {
    font-size:18px;
    color:#000;
    text-decoration:none;
}

.resumoPostNumerado {
    border-bottom: 1px dotted #333333;
    font-size: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 0 20px 10px;
    text-align: justify;
    width: 580px;
}

Adicionando Relógio Simples com JavaScript

Com esse código é Possível colocar um Relógio em paginas html sem problemas.

<!DOCTYPE html>
<html lang="pt-br">
<head>

<p id="demo"></p>

     <script>
          var myVar=setInterval(function(){myTimer()},1000);
          function myTimer()
          {
          var d=new Date();
          var t=d.toLocaleTimeString();
          document.getElementById("demo").innerHTML=t;
        }
    </script>

   </head>
     <body>
   </body>
</html>

EXEMPLO...................................................

Como Colocar imagem de Fundo Background em Videos

Este tutorial irá mostrar como adicionar uma imagem de fundo bonito para vídeos do YouTube no Blogger

Demostração

Codigo

Substitua 4hbs0MmYNT4 com seu ID de vídeo youtube

Adicionar Incriveis / Beautiful / Cool CSS3 Botões no Blogger

Este tutorial irá mostrar como adicionar impressionantes / Beautiful / Cool CSS3 Botões no Blogger. Este conjunto de botões contém botões de 8 cores diferentes (preto, rosa, verde, magentablue, vermelho, laranja e amarelo) e 3 tamanhos (grande, médio e pequeno porte).

Como Adicionar

Vá para Painel do Blogger -> Projeto -> Editar HTML
Backup seu modelo antes de fazer alterações no seu blog
Agora Expandir modelos de widgets
Encontre o código mostrado abaixo, utilizando [ctrl + F]

]]></b:skin>

Agora cole o código abaixo antes / acima

.awesome, .awesome:visited {
    background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeuCxZ_jJiXJNB1XBsVCkCHkRGTL8RwZ18MlNFSUBi2sJvsHFJtuYSQEPzcot2YhU4b_8IemvliEHEDeDhyphenhyphenFWAj4ZlVJcAi52ggaUSr830CaUkNkpXIMpBcm6hRt4PsntQ7xwp-1t4R6Y/s1600/alert-overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
        border-radius:5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}

    .awesome:hover                            { background-color: #111; color: #fff; }
    .awesome:active                            { top: 1px; }
    .small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    .large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }

    .green.awesome, .green.awesome:visited        { background-color: #91bd09; }
    .green.awesome:hover                        { background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
    .blue.awesome:hover                            { background-color: #007d9a; }
    .red.awesome, .red.awesome:visited            { background-color: #e33100; }
    .red.awesome:hover                            { background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
    .magenta.awesome:hover                            { background-color: #630030; }
    .orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
    .orange.awesome:hover                            { background-color: #d45500; }
    .yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
    .yellow.awesome:hover                            { background-color: #fc9200; }

    .pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
    .pink.awesome:hover                            { background-color: #c81e82; }

Como Usar os Botões

Use o código HTML abaixo no seu post

CÓDIGO HTML PARA BOTÕES GRANDEs

CÓDIGO HTML PARA OS BOTÕES DE MEDIUM

CÓDIGO HTML PARA BOTÕES PEQUENO

Exemplo dos Botões

LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME LINK NAME

Menu

Categorias

Postagens populares

Translate

Arquivo do blog