Skip to content

Instantly share code, notes, and snippets.

@Efetivos

Efetivos/WP_Step_by_Step.md

Last active January 1, 2021 13:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Efetivos/185f2b3c38150af3aafcdaf900467ddf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Efetivos/185f2b3c38150af3aafcdaf900467ddf to your computer and use it in GitHub Desktop.
Download ZIP
Passo a Passo | WordPress
Raw
WP_Step_by_Step.md

Atalhos & Funções para WP

  • SITE WP URL LINK
           a(href!="<?php echo get_bloginfo('url'); ?>")
  • PUG Syntax
            

            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php 
            |$wpb_all_query = new WP_Query(array(
            |    'post_type'=>'post', 
            |    'post_type'=>'servicos', 
            |    'post_status'=>'publish',
            |    'offset' => 5,
            |    'category_name'=>'editorial',
            |    'category__not_in' => 3 , //exclude certain category from the loop
            |    'posts_per_page'=>-1 
            |)); ?>

            <?php if ( $wpb_all_query->have_posts() ) : ?>
            <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
	                
		    //HTML VAI AQUI
		    //HTML VAI AQUI
		    //HTML VAI AQUI
		    //HTML VAI AQUI
		    //HTML VAI AQUI
		    
	<?php endwhile; ?>
            
            <?php wp_reset_postdata(); ?>

            <?php else : ?>
            |    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
            |<?php endif; ?>


            <?php endwhile; else: endif ?>
  • PHP/HTML Syntax
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php 
// the query
$wpb_all_query = new WP_Query(array(
    'post_type'=>'post', 
    'category_name'=>'passeio',  //filtra pelo nome da categoria
    'post_status'=>'publish',
    'posts_per_page'=>-1 //lista todos os posts existentes
 )); ?>
 

<?php if ( $wpb_all_query->have_posts() ) : ?>
<?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>

    //HTML VAI AQUI
    //HTML VAI AQUI
    //HTML VAI AQUI
    //HTML VAI AQUI
    //HTML VAI AQUI
    
<!-- the loop -->
   <?php endwhile; ?>
<!-- end of the loop -->
 
    <?php wp_reset_postdata(); ?>

<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>


<?php endwhile; else: endif ?>
  • DISPLAY ITENS DO POST
// * TITULO DO POST com link
</h1><a href="<?php the_permalink(); ?>" class="e-white e-upper"><?php the_title(); ?></a></h1>

// * THUMBNAIL DO POST
<?php the_post_thumbnail('large', array('class' => 'img-header e-wp e-hp e-img-fit')); ?>

 // * CATEGORIA DO POST
<span><?php the_category(' ')?></span>

 // * CATEGORIA DO POST (APENAS O NOME, SEM LINK)
<?php $category = get_the_category(); echo $category[0]->cat_name; ?>


 // * DATA DO POST
<span><?php echo date("d.m.Y"); ?></span>


 // * ADD SHORTCODE PUG
<?php echo do_shortcode('[name_of_shortcode]'); ?>


 // * CONTEUDO DO POST
 <p class="descr-post"><?php the_content()?></p>

 // * CONTEUDO DO POST SEM IMAGEM
<?php 
$content = get_the_content();
$content = preg_replace("/<img[^>]+\>/i", " ", $content);          
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;
?>

// * THE FIELDS DE OUTRAS PÁGINAS
<h2><?php the_field('text_field', 123); ?></h2> //123 = ID da pagina

// * THE ACFIELDS LOOP POST
<?php $value = get_field( "subt-header" ); echo $value ?>
  • PREVIOUS & NEXT LINKS w/ THUMBNAIL
// ---------- PREVIOUS

<?php   
    $prevPost = get_previous_post();
    $prevThumbnail = get_the_post_thumbnail( $prevPost->ID );
?>
<div><?php  previous_post_link( '%link', $prevThumbnail );?></div>
<div class="navigation"><p><?php previous_post_link(); ?> </div>

// ---------- NEXT
<?php   
    $nextPost = get_next_post();
    $nextThumbnail = get_the_post_thumbnail( $nextPost->ID );
?>
<div><?php  next_post_link( '%link', $nextThumbnail );?></div>
<div class="navigation"><p><?php next_post_link(); ?></div>

// ----------- MESMA CATEGORIA
<div class="navigation"><p><?php next_post_link('%link', '%title', TRUE ); ?></div>
<div class="navigation"><p><?php previous_post_link('%link', '%title', TRUE ); ?></div>

// ---------- CUSTOM POST TYPE
// PREVIOUS
a(href!="<?php $prev_post = get_previous_post(); echo get_permalink($prev_post->ID); ?>" title!="<?php $prev_post = get_previous_post(); echo $prev_post->post_title; ?>")  <?php $prev_post = get_previous_post(); echo $prev_post->post_title; ?>

//NEXT
a(href!="<?php $next_post = get_next_post(); echo get_permalink($next_post->ID); ?>" title!="<?php $next_post = get_next_post(); echo $next_post->post_title; ?>")  <?php $next_post = get_next_post(); echo $next_post->post_title; ?>
  • ADICIONAR SUPPORT UPLOAD SVG (function.php)
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');
  • GET CURRENT SLUG CATEGORY POST
   <?php $category = get_the_category(); echo $category[0]->slug; ?>">
        <?php echo $category[0]->cat_name; ?>
  • CHECK IF HAS CATEGORY
	<?php if(has_category('editorial')) : ?>
		//p It has class
	<?php else : ?>
		//p does not have class
	<?php endif ?>
  • EXCLUIR DETERMINADA CATEGORY DOS LOOPS
 	<?php $wp_query = new WP_Query(array( 'post_type' => 'post', 'category__not_in' => 2 , )); ?>
  • Thumbnail com Classe Personalizada
<?php the_post_thumbnail('large', array('class' => 'photo-main e-wp e-hp e-img-fit')); ?>

Formulário de Search

    <form role="search" method="get" action="<?php echo home_url( '/' ); ?>">
        <input type="search" class="form-control" placeholder="Escreva sua busca" value="<?php echo get_search_query() ?>" name="s" title="Search" />
    </form>

Include Parts / Partials

//include alternative footer or header
<?php get_footer('inner'); ?>

//name archive
footer-inner.php

//include partials
<?php include(TEMPLATEPATH . "/partials/name_file.php"); ?>

Integrando Menu (dev) com Menu (wp)

  • criar menu na plataforma do WP: Aparencia > Menu > Novo Menu > Escolher Páginas Criadads
  • Colocar códico abaixo dentro do Holder dos Links ( substitui tag '<a')
<?php $menuParameters = array (
|    'menu' => 'main-menu', //nome do menu usado no Painel WP
|    'container'  => false,
|    'echo'  => false,
|    'items_wrap'  => '%3$s',
|    'depth'  => 0,
|    'menu_class'=> '[oi]'
|);
|echo strip_tags(wp_nav_menu($menuParameters ), '<a>');
|?>

Paginação List Post (Completa)

    <?php $qtdPosts = get_query_var('paged');

        $posts = new WP_Query(array(
        'posts_per_page' =>2,
        'paged' => $qtdPosts
        ));

        if ($posts->have_posts()) :
        echo paginate_links(array(
            'total' => $posts->max_num_pages
        ));

    endif; ?>

Paginação List Post (Simples)

 // Adicionar Wp Query dos Post // * MUITO IMPORTANTE
 
<?php previous_posts_link('<button class="btn-cta e-sans e-white t-color">PRÓXIMO</button>',$my_query->max_num_pages); ?>
<?php next_posts_link('<button class="btn-cta e-sans e-white t-color">ANTERIOR</button>',$my_query->max_num_pages); ?>

---- ALTERNATIVE NATIVE ---

 <?php previous_posts_link('&laquo; Newer',$wpb_all_query->max_num_pages); ?>
<?php next_posts_link('Older &raquo;',$wpb_all_query->max_num_pages); ?>

Esconder Campos Vazios (ACF)

<?php if( get_field('field_name') ): ?>
	<p>My field value: <?php the_field('field_name'); ?></p>
<?php else:  ?>
	<p>My field value: <?php the_field('field_name'); ?></p>
<?php endif; ?>

if else / isPage

    <?php 
        if(is_front_page())
            echo "Home";
        else if(is_404())
            echo "Page Not Found";
        else if(is_category() || is_search() )
            echo single_cat_title();
        else
            the_title();
        echo ' | '.get_bloginfo('name');  
    ?>

Add Customização do Painel Aparencia (WORDPRESS)

  • Dentro do Function PHP
function affair_menufs_callout($wp_customize) {
	$wp_customize->add_section('affair-menufs-section', array(
		'title' => 'Edit: Menu FullScreen' //Nome da Campo no Painel
	));

    //  * TEXTOS
	$wp_customize->add_setting('affair-menufs-link-name', array());
	$wp_customize->add_control( new WP_Customize_Control($wp_customize, 'affair-menufs-link-name-control', array(
			'label' => 'Nome do Link 1',
			'section' => 'affair-menufs-section',
            'settings' => 'affair-menufs-link-name'
            /* <?php echo get_theme_mod('affair-menufs-link-name') ?> */
        )));
    
    //Link 
	$wp_customize->add_setting('affair-menufs-link', array( ));
	$wp_customize->add_control( new WP_Customize_Control($wp_customize, 'affair-menufs-link-control', array(
			'label' => 'Link 1',
			'section' => 'affair-menufs-section',
            'settings' => 'affair-menufs-link'
            /* <a class="router link-menu-mob e-rel e-flex" href="/<?php echo get_theme_mod('affair-menufs-link') ?>"> */
        )));
        
    //Images 
	$wp_customize->add_setting('affair-menufs-image');
	$wp_customize->add_control( new WP_Customize_Image_Control ($wp_customize, 'affair-menufs-image-control', array(
			'label' => 'Image 1',
			'section' => 'affair-menufs-section',
            'settings' => 'affair-menufs-image'            
            /* <img class="img-menu e-wp e-hp e-img-fit e-abs" src="<?php echo get_theme_mod('affair-menufs-image') ?>"> */
	)));

    }

add_action('customize_register', 'affair_menufs_callout');

Add Class into Category / the Content

<p class="t-gray e-sans">          
<?php if ( $content_source == 'excerpt' ) { ?>
      <div class="t-gray e-sans">
	  <?php the_excerpt(); ?>
      </div>
  <?php } else { ?>
      <p><div class="t-gray e-sans content">
	  <?php the_content(); ?>
      </div></p>
  <?php } ?> 

</p>

Get value from another Page | ACF

<?php   
    $nextPost = get_next_post(); //get next post
    $value = get_field( 'cor_ensaio', $nextPost->ID ); //add the_field 'cor_ensaio' on var $value
?>

<div> 
    <?php  echo $value ?>
</div>

Ignorar posts Fixos

<?php $wpb_all_utlimas = new WP_Query(array( 'post_type'=> 'post', 'post_status'=> 'publish','offset' => 8, 'ignore_sticky_posts' => -1, 'posts_per_page'=> 3 )); ?>

Show quantidade de itens loop ACF

<?php $count = count(get_field('grid_block')); echo $count ?>
//alternative
<?php $count = count($row['team_members']); echo $count ?>

ADD CUSTOM LOGO

function theme_prefix_setup() {	
	add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
	) );

    /*
            <img class="logo-main" src="<?php 
        $custom_logo_id = get_theme_mod( 'custom_logo' );
        $image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
        echo $image[0];
        
        ?>" alt="Logo Efetivos">
         */
}
add_action( 'after_setup_theme', 'theme_prefix_setup' );

MOSTRANDO OU NAO UM ELEMENTO COM ACF precisa ser criado o custom field (campo personalizado)

<?php if( get_field('display_cond') == true ): ?>

	//CONTENT GO HERE

<?php endif; ?>

DISPLAY SUBCATEGORY

//field display
 <?php echo $this_category; ?>
        <?php 
        |$current_cat = get_category($cat);
        |$wpb_all_query = new WP_Query(array(
        |    'post_type'=> 'elenco', 
        |    'post_status'=>'publish',
        |    'orderby'=>'title' ,
        |    'order'=>'ASC' ,
        |    'category_name' => $current_cat->slug 
        |)); ?>

        //-display subcats
        |<?php
        |
        |if (is_category()) { $this_category = get_category($cat); } ?>
        |    <?php
        |
        |if ($this_category->category_parent) $this_category = wp_list_categories('orderby=asc&show_count=0
        |    &title_li=&use_desc_for_title=1&child_of=' . $this_category->category_parent . "&echo=0");
        |else $this_category = wp_list_categories('orderby=asc&depth=1&show_count=0
        |    &title_li=&use_desc_for_title=1&child_of=' . $this_category->cat_ID . "&echo=0");
        | ?>

MOSTRAR ID DASHBOARD WORDPRESS on functions.php

/**
 * Just adds a column without content
 *
 * @param array $columns Array of all the current columns IDs and titles
 */
function misha_add_column( $columns ){
	$columns['misha_post_id_clmn'] = 'ID'; // $columns['Column ID'] = 'Column Title';
	return $columns;
}
add_filter('manage_posts_columns', 'misha_add_column', 5);
//add_filter('manage_pages_columns', 'misha_add_column', 5); // for Pages
 
 
/**
 * Fills the column content
 *
 * @param string $column ID of the column
 * @param integer $id Post ID
 */
function misha_column_content( $column, $id ){
	if( $column === 'misha_post_id_clmn')
		echo $id;
}
add_action('manage_posts_custom_column', 'misha_column_content', 5, 2);
//add_action('manage_pages_custom_column', 'misha_column_content', 5, 2); // for Pages

SEARCH (DISPLAY ALL - EVERYTHING)

//name plugin
Search Everything
By Sovrn, zemanta

> Add Content (partials) via Include / Hooks

Define path from Theme Directory (functions.php)

define('THEME_URI', get_template_directory_uri() );
define('THEME_PATH', get_template_directory() );

Create Hook Action on header.php

<?php do_action( 'my_hook' ); ?>

Create Hook to Action on function.php

function my_function() {
    if( is_product() ) { 
        echo '<h1> LOUVE 2</h1>';
        include ( THEME_PATH . '/layout/partials/instagram.php' );
    }
}
add_action( 'my_hook', 'my_function' );

> Listar todas as categorias com post e quantidade

Metodo Simples

    <?php $args=array( 'orderby' => 'name', 'post_type'=>'case', 'order' => 'ASC' ); $categories=get_categories($args); ?>
    <?php foreach($categories as $category): ?>
	<?php if($category->name == 'Living' || $category->name == 'Working' ) : ?>
	    h1 <?php echo $category->name; ?>
	    h3 <?php echo $category->count; ?>
	<?php endif; ?>
    <?php endforeach; ?>
	|<?php
	|$args=array(
	|'orderby' => 'name',
	|'order' => 'ASC',
	|);
	|$categories=get_categories($args);
	|foreach($categories as $category) {
	|echo '<button class="btns-cat__btn e-hp" data-categ="'.$category->name.'"><span class="cat-name t-white e-sans e-upper">' . $category->name . '</span><span class="qtd t-white e-sans">(' . $category->count . ')</span></button>'; }
	|?>

Metodo Avançado

<?php
  //for each category, show all posts
  $cat_args = array(
	'orderby' => 'name',
	'order' => 'ASC'
  );

  $categories = get_categories($cat_args);

  foreach($categories as $category) {
	  $args = array(
	  	'post_type'=>'video', // caso seja custom post
		'showposts' => -1,
		'category__in' => array($category->term_id),
		'caller_get_posts'=> 1
	  );

	  $posts=get_posts($args);

	  if ($posts) {
		  echo '<p>Categoria: <a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name. $category->count '</a> </p> ';

		  echo '<ul>';
		  foreach($posts as $post) {
			setup_postdata($post);

			echo '<li><a href="' . get_permalink() .'" rel="bookmark" title="Permanent Link to '. the_title_attribute('echo=0') . '">' . get_the_title() . ' </a></li>';

		  } // foreach($posts
		  echo '</ul>';

		} // if ($posts

  } // foreach($categories
?>

Wordpress Installation | MAMP

Menu MAMP > Preferences > Set Web & MySQL port to 80 & 3306 (!!! IMPORTANT)
entrada no BROWSER: /http://localhost/

| Instalar o Wordpress

    • Download do Wordpress (wordpress.org)
    • Criar uma pasta do repositório de sites do MAMP
    • Extrair os arquivos do Wordpress nela
    • Criar um Banco de Dados no phpMyAdmin
      Abra o phpMyAdmin > Databates > Escolha o nome > Clique em Create
    • Criar o usuário do Banco de Dados phpMyAdmin > Users > Add User > Nome, host(localhost), password. Maque Check All em Global Privileges
    • Acessar o site e instalar o Wordpress
    • Criar o usuário do wordpress

| Após Instalar o Wordpress

    • Copiar a pasta do site para wp-content/themes/
    • Mudar o index.html para index.php
    • Colocar/criar o arquivo style.css na raiz do tema
    • Adicionar a descrição do tema no topo do style.css
  • style.css
/*
Theme Name: Efetivos
Theme URI: http://Efetivos.com
Author: Victor Costa
Author URI: http://efeitvos.com/
Description: Tema do Wordpress
Version: 1.0
*/
    • Ativar o tema no Menu do Wordpress
    • Corrigir o caminho do style.css e outros caminhos se necessário
      Essa função adiciona o caminho até a raiz do tema:

//Style Css

<?php echo get_stylesheet_directory_uri(); ?>
ex.: <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">

//Imagens e JS

<?php echo get_template_directory_uri(); ?>/
ex.: <img src="<?php echo get_template_directory_uri(); ?>/images/logo-efet-branco.svg" alt="" class="logo-footer">
    • Separar o header e footer em arquivos header.php e footer.php>
      Adicionar antes de fechar o head:
 <?php wp_head(); ?>

Adicionar antes de fechar o body:

<?php wp_footer(); ?>

Adicionar o header e footer nas páginas do site e mudá-las para .php com:

Titulo Dinâmico

    <title>
	<?php 
		if(is_front_page())
			echo "Front Page Title";
		else if(is_404())
			echo "Page Not Found";
		else
			the_title();
		echo ' | '.get_bloginfo('name');  
	?>
</title>

7.1 - ADICIONAR TEMPLATES:

<?php
    //Template Name: Blog Post
    get_header();
?>
  1. Criar Nova Página no Wordpress e Escolher Home como Modelo da página.
  2. Escolhe o Modelo correto para cada página
  3. Ir Até Configurações > Leitura > Escolher página Estatica e Escolher Página Criada (Pagina Home)
  4. Adicionar Loop nas Paginas Templates( Que não se repetem. Ex.: Página Sobr, Contato )
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

//conteudo html
//conteudo html
//conteudo html

<?php endwhile; else: endif ?>
    • Começar a substituir o conteúdo por funções de Wordpress
      Mostra o nome do blog:
<?php bloginfo('name'); ?>
    • Adicionar as páginas na interface do Wordpress

10 - Transformar as páginas em HTML, em templates de Páginas
A página index.php deve estar reservada para conteúdo genérico.

index.php

<?php get_header(); ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>

<?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

<?php get_footer(); ?>

Criando Fields

- Custom Post UI

  1. Instalar Plugin: Custom Post Type UI > Por WebDevStudios
  2. Criar Novo Custom Post:
    Ex.: portfolio
    Plural.: Portfolio Items
    Terceiro.: portfolio
    Ticar opções:
    Suports: Title, Editor, Featured Image
    Built-in Taxonomies: Categorias (WP Core)
$args = array(
    'post_type' => 'casting', //Nome do Custom Post
    'category_name' => $current_cat->slug
);

- Advanced Custom Fields Pro

  1. Instalar Plugin: Advanced Custom Fields Pro > Por elliot condon
  2. Criar Novo Grupo de Campos
  3. Colocar Titulo
  4. Escolher Locar > Nome do CUSTOM POST (!! IMPORTANTE)
  5. Adicionar Campo

Rotulo do Campo: photo1
Nome do Campo: photo1
Tipo do Campo: Ex.: Image

$photo1 = get_field('photo1');

Criando Páginas:

Page Home > page-home.php

<?php
    //Template Name: Home
    get_header();
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <!-- --------------- MAIN --------------- -->
    <!-- --------------- MAIN --------------- -->
    <div class="box-title-cat">
        <h1 class="title-cat ">CASTING</h1>
    </div>

    <main class="main">
        <div class="holder-main">


<?php
$args = array(
    'post_type' => 'casting' //Slug Custom Post 
    
);

$my_query = new WP_Query( $args );                            
if ( $my_query->have_posts() ) {                            
    while ( $my_query->have_posts() ) {
        $my_query->the_post();
        $photo1 = get_field('photo1'); //variavel com a photo do Custom Field
?>
					
		<!-- init-post -->
		<div class="box-post e-rel">
			<!-- photo-post -->
			<a href="<?php the_permalink(); ?>">
			<div class="box-photo-post e-wp">
				<img src="<?php echo $photo1[sizes][large]; ?>" alt="" class="photo-main e-wp e-hp e-img-fit"> //recebe photo da variavel
			</div></a>


			<!-- text-post -->
			<div class="ctn-text-post ">
				<a href="<?php the_permalink(); ?>"> <h1 class="title-post e-wp e-sans"><?php the_title(); ?></h1></a> //recebe title
			</div>
		</div><!-- close-post -->
<?php 
    } //close while
}//close if

// Reset the `$post` data to the current post in main query.
wp_reset_postdata();
?>

        </div>
    </main>
    <?php endwhile; else: endif ?>
<?php get_footer(); ?>


Page Post > single.php

<?php
    //Template Name: Page Post
    get_header();
?>

    
	<?php 
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post(); 
			// ?>


<div  class="post-page-main">

<!-- --------------- MAIN --------------- -->
    <!-- --------------- MAIN --------------- -->
    <div class="box-title-cat e-flex-col e-wvw e-rel">
        <h1 class="title-cat e-serif"><?php the_title() ?></h1> //Titulo do Post
        <h2 class="categories e-sans"  style="text-transform: uppercase;"><?php the_category(); ?></h2> //categoria do post
        <div class="traco-fixed e-abs "></div>
    </div>

        <main class="main e-flex e-wvw">
            <div class="holder-main  e-rel ">
                <!-- --- box images ---- -->
                <div class="box-images-main e-flex-wrap e-wp ">
                <?php $photo1 = get_field('photo1');?> //I
                <?php $photo2 = get_field('photo2');?> //I
                <?php $photo3 = get_field('photo3');?> //I
                    <img src="<?php echo $photo3[sizes][large]; ?>" alt="" class="photo-main e-wp">
                    <img src="<?php echo $photo2[sizes][large]; ?>" alt="" class="photo-main e-wp">
                    <img src="<?php echo $photo1[sizes][large]; ?>" alt="" class="photo-main e-wp">
                </div>

                <?php the_content();  // conteudo wp?> 
            </div>
        </main>
    </div>

</div> <!-- close post mains -->
<?php
		} // end while
	} // end if
	?>
<?php get_footer(); ?>


Página de Categorias > category.php

<?php
    get_header();
?>

    <div class="box-title-cat e-flex e-wvw">
        <h1 class="title-cat e-serif" style="text-transform: uppercase;"><?php single_cat_title(); ?></h1> //recebe titulo da categoria
    </div>


    <!-- --------------- MAIN --------------- -->
    <!-- --------------- MAIN --------------- -->
    <main class="main e-flex e-wvw">
        <div class="holder-main e-wp e-rel e-flex-wrap">

<?php

	$current_cat = get_category($cat); //get current category

$args = array(
    'post_type' => 'casting',
    'category_name' => $current_cat->slug //recebe variavel
);


$my_query = new WP_Query( $args );                            
if ( $my_query->have_posts() ) {                            
    while ( $my_query->have_posts() ) {
        $my_query->the_post();
        $photo1 = get_field('photo1');
?>
        <!-- init-post -->
        
        <div class="box-post e-rel">
            <!-- photo-post -->
            <a href="<?php the_permalink(); ?>">
            <div class="box-photo-post e-wp"> 
             <img src="<?php echo $photo1[sizes][large]; ?>" alt="" class="photo-main e-wp e-hp e-img-fit">
            </div></a>
            <!-- text-post -->
            <div class="ctn-text-post ">
                <a href="<?php the_permalink(); ?>"> <h1 class="title-post e-wp e-sans"><?php the_title(); ?></h1></a>
            </div>
        </div><!-- close-post -->      

<?php 
    }
}
// Reset the `$post` data to the current post in main query.
wp_reset_postdata();
?>

        </div>
    </main>

<?php get_footer(); ?>

Custom Post Category category.php

<?php $cat = get_queried_object();?>
<?php $current_cat = get_category($cat); $wpb_all_query = new WP_Query(array( 'post_type'=> 'cases', 'post_status'=> 'publish', 'category_name' => $current_cat->slug, 'posts_per_page'=> -1 )); ?>
section.cases-post
    .cases-post__ctn.post-ctn
    
	<?php if ( $wpb_all_query->have_posts() ) : ?>
	<?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
	    .post
		a(href!='<?php the_permalink(); ?>').post__img.hover-js.hover-expl
		    picture.post__cover
			<?php $image = get_field('cover')['id']; $size = 'medium'; ?>
			source(media="(max-width: 550px)", srcset!="<?php echo wp_get_attachment_image_src( $image, 'medium' )[0]; ?>", type='image/png')
			source(srcset!="<?= get_field('cover_webp')['url']?>", type='image/webp')
			source(srcset!="<?= get_field('cover')['url']?>", type='image/jpg')
			img(src!="<?= get_field('cover')['url']?>" alt="#").img-load

		a(href!='<?php the_permalink(); ?>').post__title.t-dark <?php the_title(); ?>

	<?php endwhile; ?> <?php wp_reset_postdata(); ?><?php else : ?><?php endif; ?>

Search Page Result > search.php

<?php /* Template name: Custom Search */   
    get_header(); 
?>



    <!-- --------------- MAIN --------------- -->
    <!-- --------------- MAIN --------------- -->
    <main class="main e-flex e-wvw">
        <div class="holder-main e-wp e-rel e-flex-wrap">
        <?php 

$text = get_search_query();
$photo1 = get_field('photo1'); ?>
   <div class="box-title-cat e-flex e-wvw">
        <h1 class="title-cat e-serif" style="text-transform: uppercase;">PROCURANDO POR:  <?php echo $text; ?></h1>
    </div>
<?php


		if( have_posts() ):
			
			while( have_posts() ): the_post(); ?>                
                
                <div class="box-post e-rel">

                    <!-- photo-post -->
                    <a href="<?php the_permalink(); ?>">
                        <div class="box-photo-post e-wp"> 
                        <?php the_post_thumbnail('large', array('class' => 'photo-main e-wp e-hp e-img-fit')); ?>
                    </div></a>

                    <!-- text-post -->
                    <div class="ctn-text-post ">
                        <a href="<?php the_permalink(); ?>"> <h1 class="title-post e-wp e-sans"><?php the_title(); ?></h1></a>
                    </div>
                </div><!-- close-post -->
			
            <?php endwhile;       
            else : ?>
                <h1>NADA ENCOANTRADO</h1>
        <h4>Searching for: <?php echo $text; ?></h4>
	<?php endif;    ?>

        </div>
    </main>
<?php get_footer(); ?>

Functions > functions.php

<?php 

// Funções para Limpar o Header
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'start_post_rel_link', 10, 0 );
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');

// Habilitar Menus
add_theme_support('menus');
add_theme_support( 'post-thumbnails' ); 

?>

Continuação

    • Adicionar o Loop O Loop é utilizado para mostrar o conteúdo dos posts, ele é inteligente o suficiente para saber se precisa mostrar apenas um ou uma sequência.

Adicionar o Loop as páginas e ao index.php

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	
	<?php the_title(); ?>
	<?php the_content(); ?>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
    • Advanced Custom Fields

Adicionar o Plugin Advanced Custom Fields Pro (Nota: O Pro é pago e só pode ser utilizado nos arquivos do curso). (Existem alternativas, mas a lógica é a mesma)

Iniciar a troca do conteúdo por fields, Adicionar o conteúdo a interface do Custom Fields.

    • Repeater Field
<?php if(have_rows('nomedorepeater')): while(have_rows('nomedorepeater')) : the_row(); ?>
	
	the_sub_field('nomedocampo');

<?php endwhile; else : endif; ?>
    • Pegar valores de outras páginas
<?php
	$contato = get_page_by_title('contato');
	the_field('telefone', $contato)
?>
    • Terminar de adicionar os outros campos
<?php echo date("Y"); ?> (Mostrar a data)
    • Adicionar campos para SEO
<title><?php bloginfo('name'); ?> - <?php wp_title(''); ?> <?php the_field('title_seo'); ?></title>
<meta name="description" content="<?php bloginfo('name'); ?> - <?php wp_title(''); ?> <?php the_field('description_seo'); ?>">
    • Adicionar o Functions.php
<?php 

// Funções para Limpar o Header
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'start_post_rel_link', 10, 0 );
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_styles', 'print_emoji_styles');

// Habilitar Menus
add_theme_support('menus');
add_theme_support( 'post-thumbnails' ); 

?>

18. - Adicionar o Menu

// Habilitar Menus

add_theme_support('menus');

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

<?php
	$args = array(
		'menu' => 'principal',
		'container' => false
	);
	wp_nav_menu( $args );
?>

19. - Cores Dynamicas

// em function.php

// Output Customize CSS
function affair_customize_css() { ?>

	<style type="text/css">
		.t-color,
		.box-footer h1.title-footer {
			color: <?php echo get_theme_mod('affair_primary_color'); ?> !important;
		}

		/* Color */
		.e-color,
		.box-links-desk a.link-menu-desk:before,
		.box-scroll-down:hover,
		{
			background-color: <?php echo get_theme_mod('affair_primary_color'); ?> !important;
		}
		.box-scroll-down,button.btn-cta:hover {
			border-color: <?php echo get_theme_mod('affair_primary_color'); ?> !important;
		}
		.ctn-cta button.btn-cta:hover {
			border-color:<?php echo get_theme_mod('affair_primary_color'); ?> !important;
		}
		*:before {
			background-color: <?php echo get_theme_mod('affair_primary_color'); ?> !important;
		}
		.slide-home .border-slide {
        box-shadow: 0px 0px 0px 0vh inset <?php echo get_theme_mod('affair_primary_color'); ?>; }

		/* Color Strong */
		.go-page
		 {
			background-color: <?php echo get_theme_mod('affair_strong_color'); ?> !important;
		}

		.box-trg-slide:hover{
			border-color: <?php echo get_theme_mod('affair_strong_color'); ?> !important;
		}
        /* Max Color 
		.box-img-slide-home,*/
		.reveal-btn {
			background-color: <?php echo get_theme_mod('affair_max_strong_color'); ?> !important;
		}
		
	</style>

	<script>
		$('.e-color').css('background-color','<?php echo get_theme_mod('affair_primary_color'); ?>');	
	</script>
<?php }
add_action('wp_footer', 'affair_customize_css');

20. - Adicionar o Menu

// Fila de Script

function wpb_adding_scripts() {
	wp_register_script('main', get_template_directory_uri() . '/js/main.js','','1.1', true);
	wp_enqueue_script('main');
	if(is_front_page())
		wp_register_script('index', get_template_directory_uri() . '/js/index.js','','1.1', true);
		wp_enqueue_script('index');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>

21. - Adicionar Loop Popular ( Mais Lidos)

https://www.wpbeginner.com/wp-tutorials/how-to-track-popular-posts-by-views-in-wordpress-without-a-plugin/ // in Funciton.php

function wpb_set_post_views($postID) {
        $count_key = 'wpb_post_views_count';
        $count = get_post_meta($postID, $count_key, true);
        if($count==''){
                $count = 0;
                delete_post_meta($postID, $count_key);
                add_post_meta($postID, $count_key, '0');
        }else{
                $count++;
                update_post_meta($postID, $count_key, $count);
        }
}
//To keep the count accurate, lets get rid of prefetching
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);



function wpb_track_post_views ($post_id) {
if ( !is_single() ) return;
if ( empty ( $post_id) ) {
        global $post;
        $post_id = $post->ID;    
}
wpb_set_post_views($post_id);
}
add_action( 'wp_head', 'wpb_track_post_views');

// in single.php

wpb_set_post_views(get_the_ID());

// loop para mostrar popular

<?php $wpb_all_utlimas = new WP_Query(array( 'post_type'=> 'post', 'post_status'=> 'publish','meta_key' => 'wpb_post_views_count', 'posts_per_page'=> 6, 'orderby' => 'meta_value_num', 'order' => 'DESC' )); ?>
<?php if ( $wpb_all_utlimas->have_posts() ) : ?>
<?php while ( $wpb_all_utlimas->have_posts() ) : $wpb_all_utlimas->the_post(); ?>

	// Conteudo do Post
	// Conteudo do Post
	// Conteudo do Post
	
<?php endwhile; ?> <?php wp_reset_postdata(); ?><?php else : ?><?php endif; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment