WordPress se está convirtiendo rápidamente en un nombre familiar si aún no lo es. Está en todas partes, esta belleza benigna, promoviendo algunos de los mejores sitios Web y apps web que el mundo haya visto. Es una plataforma de blogs y CMS de primer nivel que no solo es increíblemente versátil, sino al mismo tiempo increíblemente fácil de aprender y usar. ¿Por qué otra razón aumentaría la popularidad de WordPress cada día que pasa?
Pero lo que ve en la superficie cuando configura y ejecuta WordPress es solo una pequeña fracción de lo que sucede detrás de escena. De hecho, la hermosa user interface que todos amamos no es nada comparada con el caos de la actividad detrás del escenario. Lo que quiero decir es que WordPress se ejecuta en dos tecnologías web algo complicadas reconocidas como PHP and MySQL.
Otras tecnologías que juegan un papel incluyen JavaScript, su primo cercano jQuery, CSS and HTML. Los temas de WordPress (e incluso los complementos) están escritos principalmente en PHP y dependen de las bases de datos MySQL para ejecutarse. Al mismo tiempo dependen de las tecnologías web antes mencionadas. Todas estas tecnologías deben trabajar juntas.
Now, as a beginner, you may not understand that in order for the WordPress platform, themes, and plugins to work in unison, developers use a set of standardized code, at the same time collectively known as PHP tags. It is these codes that we describe in today's post, showing you how useful they are. We're going to squeeze in some examples somewhere in here just in case, so get ready to have fun on your theme building journey!
Anatomy of the subject
Un tema de WordPress no es más que varios archivos PHP vinculados entre sí. Viene con un archivo de style sheet CSS que es responsable de cómo se ve su tema (y sitio). Sin embargo, volviendo a lo básico, un tema de WordPress es simplemente un par de archivos PHP. Arriba hay una instantánea de un gran tuts + cheatsheet for the anatomy of a WordPress theme. To create a WordPress theme, you will need the following files:
- header.php- This template file contains the header information, which appears within the section <head> y antes de la etiqueta de apertura . Aquí agrega metadata, título del sitio y link a su hoja de estilo CSS, entre otros.
- index.php - This is the main body template of your WordPress theme (or site). Its sole purpose is to put the other files together by including them using template tags (more on template tags in a moment).
- sidebar.php – Esta es la sección de tu barra lateral. Puede colocar widgets, categorías, menús adicionales, formulario de búsqueda y cualquier otra cosa que desee
- footer.php – Esta es la sección de pie de página. Agregue su información de derechos de autor, enlaces RSS, widgets, enlaces, iconos sociales, etc.
- page.php - Whenever you create a page on your WordPress based site, this is the responsible template
- single.php – Este archivo de plantilla lleva una sola publicación de Blog.
- comments.php - The staff responsible for the comments
- 404.php – La plantilla que se muestra cuando su lector encuentra el infame Error 404 no encontrado
- search.php - Ofrece a sus lectores la oportunidad de encontrar contents on your WordPress site.
- searchform.php - You will need a search form to offer the previously mentioned functionality, right?
- archive.php - Because finding content you posted in 2008 shouldn't be a hassle
- functions.php - Put all special functions and even custom plugins here. However, for cross-theme compatibility, it is recommended to add custom code as separate plugins. You can add additional menus, activate widgets, and much more. This file gives you a lot of power to convert your WordPress site / theme the way you want.
- style.css - This is not a PHP template file as such. But it is the file where you add your CSS styles to control the aesthetics. At the same time it comes with the information header for your WordPress theme.
You can certainly create a theme with fewer templates, but we don't recommend making it a habit. After all, you only need the above 10 files to create a standard WP theme. Thirteen is not a great number, is it? Simply put, your index.php might look like this:
<?php
// Every page will need the contents of the header.php
get_header(); ?>
// Insert main content here, include the loop
<?php
// Include your sidebar
get_sidebar(); ?>
<?php
// The footer hook is used by themes and plugins to load scripts and tracking codes
get_footer(); ?>Moving on, let's talk about a nifty code snippet called the loop.
The loop
En algunas de nuestras series de publicaciones anteriores, como el popular Tutorial de WordPress: Cómo crear un tema de WordPress a partir de HTML, hemos mencionado el ciclo, aunque de pasada. Entonces, ¿qué hace que el bucle be el fragmento popular que es? Bueno, sin este código especial, tendría que codificar manualmente cada publicación, junto con los extractos, en su tema de WordPress. Haría esto cada vez que publique un nuevo artículo.
The effort and time you would waste would turn you blue and stiff. The carbon footprint you would leave after killing your sorry self would drive a hole the size of twelve Yankees stadiums through the ozone layer. Well, I'm exaggerating the facts (or the lack of them), but you'd go crazy if you encoded each and every post on your WordPress site manually.
The loop is a lifesaver. Just put the following code snippet anywhere in your WordPress template files, and it will list all the posts you have created:
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// Post Content here
endwhile;
endif; ?>We usually use the loop in index.php to display a list of posts, but feel free to experiment; add it where you want to include your posts. At the same time, add custom HTML and PHP tags within the loop to customize your posts as you see fit. Speaking of tags, what is available in WordPress?
Include tags
Template include tags are simply PHP code that you use in any template file to include (or rather call) other template files from your WordPress theme folder. This is what we are talking about:
- - Use this in index.php to call (or include) the header.php file. It will search for header.php and display its content in index.php; that's what including a file is all about.
- - Includes sidebar.php
- - Includes the footer.php template file
- - Quick Quiz: What do you think this inclusion tag does?
Template Bloginfo Tags
There is another category of template tags that we'll just call bloginfo tags. They play a role, which is to look up information about your WordPress site from the database. This is mainly the information that you feed to your WordPress site in your admin area through the Perfil del Username and Settings -> General. Once the information is retrieved from your databases, these tags will appear the same on your site as you place them.
You can slightly modify the structure of bloginfo, so that instead of just displaying the retrieved information, you can use it (the information) elsewhere in your PHP code. How convenient? More on that in a moment. These are the most common bloginfo tags:
- - This shows the title of your WordPress blog / site
- - Esta etiqueta de plantilla muestra la Url de su blog.
- - This shows the description, or rather the tagline, of your blog.
- - Shows the character set used to encode your site. The default is UTF-8
- - This shows the URL of the CSS stylesheet of your active theme
- - Shows the version of WordPress you are using
- - Show WordPress language
- - Shows the URL of the RSS feed 0.92
- - Displays the URL of the RSS 2.0 feed
There are several others bloginfo tags that you can use to promote your WordPress theme. Now about that little bloginfo modification we talked about a couple of seconds ago. Until now, we have been using . Let's modify this to: . Let me break down the parameters:
- $ show – Esta es la keyword que usa para nombrar la información que desea recuperar de la base de datos. Los ejemplos incluyen ‘nombre’, ‘URL’, ‘descripción’, ‘admin_email’, etc.
- $ filter - This only enables you to filter the retrieved information. By default it is set to 'raw' which just means that the value of $ show is returned as is. Setting this to 'display' will cause the value of $ show to be passed through the wptexturize () function first. However, don't worry about this currently.
Here's an example: Suppose we want to search and display your tagline (site description) that says "Best premium WordPress themes", we would first retrieve this information using this tag ...
… That loads the description of the site in $ site_description. To display your site description on your site, use this:
This gives you: Their motto is: The best premium WordPress themes
Note: There are many other types of template labels that enable you to achieve much more with your WordPress site. They are classified into various sets, viz. general labels, author tags, post thumbnail tags, category tagsand link labels among others. You can even use them inside the loop, so yes, you should have fun.
Theme style sheet
Mencionamos style.css previamente. Nuevamente, ¿por qué es importante el archivo style.css? En primer lugar, proporciona detalles sobre su tema. Esta información va al encabezado de la hoja de estilo, lo que ayuda a identificar el tema durante la selección en el área de administración. Como tal, dos temas no deben tener los mismos detalles en los headers de sus hojas de estilo. A continuación, se muestra un ejemplo de un encabezado de hoja de estilo:
/*
Theme Name: Your Theme Name
Theme URI: https://www.yoursite.com/yourtheme
Author: Your Name
Author URI: https://www.yoursite.com/
Description: This WordPress theme is 100% responsive blah blah...
Version: 1.0
License: GNU General Public License V2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: gold, one-column, left-sidebar, responsive-grid, etc
Text Domain: yourthemename
*/This information appears first (or at the top) in style.css. Other than that, make sure that:
- Follow, continue CSS encoding standards
- Use valid CSS
- Minimize CSS
- Add styles that can be printed
- Style all HTML items
Final thoughts
This cheat sheet is just a quick resource to get you started as you learn about WordPress theme development. With the tags and snippets we've shared here, you can quickly develop a standard theme and improve it without breaking a sweat. Of course, you should keep learning about WordPress theme development, and for that we recommend the WordPress Codex, tuts +, Threehouse, and ThemeShaper among other renowned resources.
Other than that, feel free to share your tips, cheats, snippets, or anything else you have in mind in the comments below. We'd love to know where or how you learn about WordPress. See you!
