Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:wordpress [2015/01/02 20:09] alfred [Conditional tags] |
wiki2:wordpress [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 54: | Línea 54: | ||
| * Attachment. | * Attachment. | ||
| + | ==== functions.php ==== | ||
| + | To add some logic to the template. The difference between functions.php and plugin. | ||
| + | |||
| + | A WordPress plugin: | ||
| + | * Requires specific, unique header text | ||
| + | * Is stored in wp-content/plugins, usually in a subdirectory | ||
| + | * Only executes on page load when activated | ||
| + | * Applies to all themes | ||
| + | * Should have a single purpose, e.g., convert Posts to Pages, offer search engine optimization features, or help with backups | ||
| + | A functions file: | ||
| + | * Requires no unique header text | ||
| + | * Is stored in theme’s subdirectory in wp-content/themes | ||
| + | * Executes only when in the active theme’s directory | ||
| + | * Applies only to that theme. If the theme is changed, the functionality is lost can have numerous blocks of code used for many different purposes | ||
| + | |||
| + | In functions.php you can: | ||
| + | * Use WordPress hooks. For example, with the excerpt_length filter you can change your post excerpt length (from default of 55 words). | ||
| + | * Enable WordPress features with add_theme_support() to turn on post thumbnails, post formats, and navigation menus. | ||
| + | * Define functions you wish to reuse in multiple theme template files. | ||
| + | |||
| + | functions.php is loaded during theme setup, after any plugin files have loaded. | ||
| + | |||
| + | General uses for functions.php: | ||
| + | * Theme Setup | ||
| + | * Initial Setup | ||
| + | * Automatic Feed Links | ||
| + | * Navigation Menus | ||
| + | * Load Text Domain | ||
| + | * Post Thumbnails (to allow thumbnail images in posts) | ||
| + | * Post Formats | ||
| + | * Sidebars | ||
| + | * Custom header (to allow the user to use their own image) | ||
| + | * Custom background | ||
| + | * Add editor style | ||
| + | * Content width | ||
| + | |||
| + | {{:wiki2:wordpress:example_functions_php.txt|This is an example of functions.php}} | ||
| ==== Attaching CSS and JS ==== | ==== Attaching CSS and JS ==== | ||
| - | The style.css and the comment-reply script are required in all themes, but it may be necessary to add other files to extend the functionality of your theme. There are two steps to use scripts and styles in your template. First to register and second to enqueue it in the functions.php files. | + | You will need to register and enqueue the plugins and styles. To do it, you must add a callback function to the head or the ''wp_enqueue_scripts'' event. To add it: |
| <code php> | <code php> | ||
| - | // register a stylesheet and a script | + | add_action( 'wp_enqueue_scripts', 'register_styles' ); |
| - | wp_register_style( $handle, $src, $deps, $ver, $media ); | + | |
| - | wp_register_script( $handle, $src, $deps, $ver, $in_footer ); | + | |
| - | // enqueue a style and a scriptt | + | |
| - | wp_enqueue_style( $handle ); | + | |
| - | wp_enqueue_script( $handle ); | + | |
| </code> | </code> | ||
| - | * $handle — is the reference for the script or style and is used in the enqueue function. | ||
| - | * $src — URL to the file you are registering. | ||
| - | * $deps — array of any dependencies (optional). | ||
| - | * $ver — indicated version (optional) | ||
| - | * $media — for style indicates the media type the script is intended for (optional). | ||
| - | * $in_footer — for scripts places the scrip in the footer (optional). | ||
| - | There are [[https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-included-and-registered-by-wordpress|some of them]] already registered. | ||
| - | Rather then loading the stylesheet in your header.php file, you should load it in using wp_enqueue_style. In order to load your main stylesheet, simply insert: | + | Then, to register and enqueue: |
| <code php> | <code php> | ||
| - | wp_enqueue_style( 'style', get_stylesheet_uri() ); | + | function register_styles() { |
| - | wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all'); | + | wp_register_style( 'my-plugin', get_template_directory_uri() . '/css/my_style.css' ); |
| - | wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); | + | wp_enqueue_style( 'my-plugin' ); |
| + | } | ||
| </code> | </code> | ||
| + | All of this code goes into the functions.php. | ||
| + | |||
| + | You also can use ''plugins_url()''(for Plugins) and ''get_template_directory_uri()'' (for Themes) to get a proper URL. | ||
| + | |||
| + | In the same way you will use ''wp_register_script'' and ''wp_enqueue_style''. | ||
| ==== Page templates ==== | ==== Page templates ==== | ||
| - | Special wordpress templates. They are only to change the look and feel of a page; they can be applied to a single page, a page section or a class of pages. page-about.php is a page template, more specific than page.php or index.php. | + | Special wordpress templates. They are only to change the look and feel of a page (not a post); they can be applied to a single page, a page section or a class of pages. page-about.php is a page template, more specific than page.php or index.php. |
| + | When a user requests a specific page, the core WordPress code decides which template to use for rendering that page. Template Hierarchy: | ||
| + | * Page Template — If the page has a custom template assigned, WordPress looks for that file and, if found, uses it. | ||
| + | * page-{slug}.php — Or else WordPress looks for and, if found, uses a specialized template named with the page’s slug. | ||
| + | * page-{id}.php — Or else WordPress looks for and, if found, uses a specialized template named with the page’s ID. | ||
| + | * page.php — Or else WordPress looks for and, if found, uses the theme’s default page template. | ||
| + | index.php — Or else WordPress uses the theme’s index file. | ||
| + | Name your template file so you can easily identify its template name, e.g., filename my-custom-page.php for the template name “My Custom Page.” Important! Do not use page- as a prefix, as WordPress will interpret the file as a specialized template, meant to apply to only one page on your site. | ||
| + | For example: Your About page has a slug of ‘about’ and an ID of 6. If your active theme’s folder has a file named page-about.php or page-6.php, then WordPress will automatically find and use that file to render the About page. | ||
| ==== The post loop ==== | ==== The post loop ==== | ||
| It's used to display posts according to your instructions given by template tags. The basic loop is (while there are posts, display the posts): | It's used to display posts according to your instructions given by template tags. The basic loop is (while there are posts, display the posts): | ||
| Línea 143: | Línea 183: | ||
| * Conditional functions: ''is_user_logged_in()'', ''is_home()'', ''is_front_page()'', ''is_admin()''... | * Conditional functions: ''is_user_logged_in()'', ''is_home()'', ''is_front_page()'', ''is_admin()''... | ||
| * [[https://developer.wordpress.org/themes/basics/conditional-tags/|Other functions to ask the template]] | * [[https://developer.wordpress.org/themes/basics/conditional-tags/|Other functions to ask the template]] | ||
| - | * ''bloginfo('name');'' to obtain information about the blog (name, title...) | + | * ''bloginfo('name');'' to obtain information about the blog. Possible parameters: name, description, charset. |
| * ''the_title();'' | * ''the_title();'' | ||
| + | ==== How to... ==== | ||
| + | === Simple header === | ||
| + | <code php> | ||
| + | <head> | ||
| + | <meta charset="<?php bloginfo( 'charset' ); ?>"> | ||
| + | <title><?php wp_title( '|', true, 'right' ); ?></title> | ||
| + | <link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" /> | ||
| + | <?php wp_head(); ?> | ||
| + | </head> | ||
| + | </code> | ||
| + | |||
| + | === Create a front pate === | ||
| + | You must indicate on the admin panel that the front page won't show the first post but content from a created page. Then... | ||
| + | <code php> | ||
| + | <?php | ||
| + | /* | ||
| + | * Template Name: My Template | ||
| + | */ | ||
| + | get_header(); ?> | ||
| + | |||
| + | <div id="container"> | ||
| + | <div id="content" class="pageContent"> | ||
| + | |||
| + | <h1 class="entry-title"><?php the_title(); ?></h1> <!-- Page Title --> | ||
| + | <?php | ||
| + | // TO SHOW THE PAGE CONTENTS | ||
| + | while ( have_posts() ) : the_post(); ?> <!--Because the_content() works only inside a WP Loop --> | ||
| + | <div class="entry-content-page"> | ||
| + | <?php the_content(); ?> <!-- Page Content --> | ||
| + | </div><!-- .entry-content-page --> | ||
| + | |||
| + | <?php | ||
| + | endwhile; //resetting the page loop | ||
| + | wp_reset_query(); //resetting the page query | ||
| + | ?> | ||
| + | |||
| + | <?php | ||
| + | // TO SHOW THE POST CONTENTS | ||
| + | ?> | ||
| + | <?php | ||
| + | $my_query = new WP_Query( 'cat=1' ); // I used a category id 1 as an example | ||
| + | ?> | ||
| + | <?php if ( $my_query->have_posts() ) : ?> | ||
| + | <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> | ||
| + | <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> | ||
| + | |||
| + | <h1 class="entry-title"><?php the_title(); ?></h1> <!-- Queried Post Title --> | ||
| + | <div class="entry-content"> | ||
| + | <?php the_excerpt(); ?> <!-- Queried Post Excerpts --> | ||
| + | </div><!-- .entry-content --> | ||
| + | |||
| + | <?php endwhile; //resetting the post loop ?> | ||
| + | |||
| + | </div><!-- #post-<?php the_ID(); ?> --> | ||
| + | |||
| + | <?php | ||
| + | wp_reset_postdata(); //resetting the post query | ||
| + | endif; | ||
| + | ?> | ||
| + | |||
| + | </div><!-- #content --> | ||
| + | </div><!-- #container --> | ||
| + | </code> | ||
| + | |||
| + | === Get all posts === | ||
| + | Using the argument post_status=any and post_per_page=1: | ||
| + | <code php> | ||
| + | $args = array( | ||
| + | 'post_type' => 'post', | ||
| + | 'orderby' => 'title', | ||
| + | 'order' => 'ASC', | ||
| + | 'post_status' => 'any', | ||
| + | 'posts_per_page' => -1, | ||
| + | ); | ||
| + | $my_query = new WP_Query($args); | ||
| + | </code> | ||
| + | |||
| + | === Get a concrete page content === | ||
| + | <code php> | ||
| + | <?php $the_query = new WP_Query( 'pagename=contact' ); ?> | ||
| + | <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?> | ||
| + | <h2><?php the_title(); ?></h2> | ||
| + | <?php the_content(); ?> | ||
| + | <?php endwhile; ?> | ||
| + | <?php wp_reset_postdata(); ?> | ||
| + | </code> | ||
| + | |||
| + | === Get child pages from front page === | ||
| + | First you must obtain the ID of the front page, it's stored in the wp_options WP table, as option_name=page_on_front and option_value=ID of the page. So if you want to retrieve this value, just use get_option('page_on_front'). | ||
| + | |||
| + | <code php> | ||
| + | <?php $args = array( | ||
| + | 'child_of' => get_option('page_on_front'), | ||
| + | 'post_type' => 'page', | ||
| + | 'post_status' => 'publish', | ||
| + | 'title_li' => '', | ||
| + | ); ?> | ||
| + | <?php $children = wp_list_pages( $args ); ?> | ||
| + | <?php if ($children) : ?> | ||
| + | <ul> | ||
| + | <?php echo $children; ?> | ||
| + | </ul> | ||
| + | <?php endif; ?> | ||
| + | </code> | ||
| + | ==== Other functionalities ==== | ||
| + | * [[http://codex.wordpress.org/Post_Thumbnails|Post thumbnails]] | ||
| + | * [[http://codex.wordpress.org/Custom_Headers|Custom headers]] | ||
| ===== Plugins ===== | ===== Plugins ===== | ||