Reutilização códigos e estruturas no WordPress

Apresentei essa palestra no 33º Meetup WordPress Rio que aconteceu dia 25/11 no Infnet.

Transcript

1. Reutilização de códigos e estruturas no WordPress Anderson Nascimento
2. Anderson Nascimento theandersonn.com
3. Conhecimento • Variáveis e Arrays • Condicionais e laços • Funções • Hierarquia do WordPress • Actions e Filters
4. bloginfo(); bloginfo( 'template_url' ); // URL of the active theme's directory bloginfo( 'name' ); // Site title (set in Settings > General) bloginfo( 'description' ); // Site tagline (set in Settings > General) https://developer.wordpress.org/reference/functions/bloginfo/ function bloginfo( $show = '' ) { echo get_bloginfo( $show, 'display' ); } <img src="<?php bloginfo('template_url '); ?>/static/images/picture.jpg " alt="img">
5. Customizações function assets_images_url () { echo get_stylesheet_directory_uri () . '/static/images '; // http://localhost:4500/my-project/content/themes/my-theme } <img src="<?php assets_images_url(); ?>/beautiful-picture.jpg" alt="This is a beautiful picture">
6. Customizações function formatter_phone ($data) { $data = trim($data); $data = str_replace("-", "", $data); $data = str_replace(" ", "", $data); $data = str_replace("(", "", $data); $data = str_replace(")", "", $data); return $data; } // echo formatter_phone($phone);
7. Customizações const getEl = id => document.getElementById(id) // getEL('yourId') Exemplo JavaScript
8. Utilizando Hooks https://lv.wordpress.org/plugins/simply-show-hooks/ Simply Show Hooks
9. // Seu script aparecerá antes do fechamento da tag </head> add_action( 'wp_head', 'add_recurso_no_head' ); function add_recurso_no_head() { ?> <!-- inserir script aqui --> <?php } // Seu script aparecerá antes do fechamento da tag </body> add_action('wp_footer', 'add_recurso_no_footer'); function add_recurso_no_footer() { ?> <!-- inserir script aqui --> <?php } footer head
10. add_action('wp_enqueue_scripts', 'thepress_load_scripts_style'); function thepress_load_scripts_style() { // versão aleatória $version = rand(0,999); // Carregar jQuery nativo do WordPress wp_dequeue_script('jquery'); wp_enqueue_script('jquery', false, array(), false, true); wp_enqueue_script('jquery-core', false, array(), false, true); wp_enqueue_script('jquery-migrate', false, array(), false, true); // Carregar os estilos CSS wp_enqueue_style('theme', get_stylesheet_directory_uri() . '/assets/css/all.css', 1, $version); // Carregar scripts JS wp_enqueue_script('app', get_stylesheet_directory_uri() . '/assets/js/all.js', null, $version, true); } wp_enqueue_scripts
11. // registro de menus add_action('init', 'thepress_init_menu'); // Exibe os menus function menu_header () { wp_nav_menu( array( // identificação do menu 'menu' => 'Menu header', // localização do menu 'theme_location' => 'menu-header', // níveis de hierarquia do menu 'depth' => 1, // class do menu 'menu_class' => 'menu-header' ) ); } Criação de menus https://developer.wordpress.org/reference/functions/wp_nav_menu/ // Exibir menu no front-end if (function_exists('menu_header')) { menu_header(); } Purify WordPress Menus https://wordpress.org/plugins/purify-wp-menues/
12. get_template_part(); https://developer.wordpress.org/reference/functions/get_template_part/ get_template_part( 'template-parts/card' );
13. Separação core e content define( 'WP_USE_THEMES', true ); require_once dirname( __FILE__ ) . '/cms/wp-blog-header.php'; ├── cms │ └── WordPress/ ├── content │ ├── languages/ │ ├── plugins/ │ └── themes/ │ ├── .gitignore ├── index.php ├── local-config.php ├── wp-config.php ├── LICENSE.md └── README.md https://github.com/markjaquith/WordPress-Skeleton
14. Obrigado! theandersonn.com