Plantilla desde 0 de WP

Miércoles 30 Enero

Mirar los ejemplos de los selectores de CSS pinchando sobre cada selector se abrirá una ventana con un ejemplo aclaratorio, esto nos servirá para poder seleccionar de forma más precisa los elementos HTML a los que queremos dar formato en nuestra plantilla de wordpress. Los más importantes y que debemos utilizar están marcados en verde.

Selector Example Example description
.class

.intro

Selects all elements with class=»intro»
#id

#firstname

Selects the element with id=»firstname»
*

*

Selects all elements
element

p

Selects all <p> elements
element,element

div, p

Selects all <div> elements and all <p> elements
element element

div p

Selects all <p> elements inside <div> elements
element>element

div > p

Selects all <p> elements where the parent is a <div> element
element+element

div + p

Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute]

[target]

Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target=»_blank»
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word «flower»
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with «en»
[attribute^=value] a[href^=»https»] Selects every <a> element whose href attribute value begins with «https»
[attribute$=value] a[href$=».pdf»] Selects every <a> element whose href attribute value ends with «.pdf»
[attribute*=value] a[href*=»w3schools»] Selects every <a> element whose href attribute value contains the substring «w3schools»
:active

a:active

Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child

p:first-child

Selects every <p> element that is the first child of its parent
::first-letter

p::first-letter

Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover

a:hover

Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to «it» (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no «required» attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with placeholder text
:read-only input:read-only Selects input elements with the «readonly» attribute specified
:read-write input:read-write Selects input elements with the «readonly» attribute NOT specified
:required input:required Selects input elements with the «required» attribute specified
:root :root Selects the document’s root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited

a:visited

Selects all visited links

 

Añadir MENU a wordpress

1.- pegar este código en functions.php al final de la función simple_theme_setup (antes de la llave final «}» )


register_nav_menus(array(

'primary' => __('Primary Menu')

));


2.- Ir a apariencia > temas  y seleccionar el checkbox Primary Menu

3.- Pegar el siguiente código en header.php


<?php $args = array( 'theme_location' => 'primary'
    );
?>
<?php wp_nav_menu($args); ?>

 

INDEX


<?php get_header(); ?>
	


<div class="main">
		


<div class="container">
			<?php if(have_posts()) : ?>
				<?php while(have_posts()): the_post(); ?>
					


<h3><?php the_title(); ?></h3>



					


<div class="meta">
					Created By <?php the_author(); ?> on <?php the_time('F j, Y g:i a'); ?>
					</div>



					<?php the_content(); ?>
				<?php endwhile; ?>
			<?php else : ?>
				<?php echo wpautop('No se han encontrado posts'); ?>
			<?php endif; ?>
		</div>



	</div>




<?php get_footer(); ?>

HEADER


<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<title><?php bloginfo('name'); ?></title>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
	<?php wp_head(); ?>
</head>
<body>
	


<header>
		


<div class="container">
			


<h1><?php bloginfo('name'); ?></h1>



			<span><?php bloginfo('description'); ?></span>
		</div>



	</header>




FOOTER





<footer>
	


<div class="container">
		

&copy; <?php the_date('Y'); ?> - <?php bloginfo('name'); ?>

		</div>



	</footer>




	<?php wp_footer(); ?>
</body>
</html>

PAGE

page.php


<?php get_header(); ?>
	
<div class="main">
		
<div class="container">
			<?php if(have_posts()) : ?>
				<?php while(have_posts()): the_post(); ?>
					
<article class="post">
						
<h3>					
							<?php the_title(); ?>
						</h3>

						<?php if(has_post_thumbnail()) : ?>
							
<div class="post-thumbnail">
								<?php the_post_thumbnail(); ?>
							</div>

						<?php endif; ?>
						<?php the_content(); ?>
						
			
					</article>

				<?php endwhile; ?>
			<?php else : ?>
				<?php echo wpautop('Sorry, No posts were found'); ?>
			<?php endif; ?>
		</div>

	</div>


<?php get_footer(); ?>

STYLE


body{
	font-family: Arial;
	font-size:15px;
	color:#333;
	background:#f4f4f4;
	margin:0;
	padding:0;
	line-height: 1.7em;
}

header{
	background: #393939;
	color:#fff;
	padding:20px 10px;
}

header h1{
	color:#fff;
	margin:0;
	padding:0;
	padding-bottom: 10px;
}

.container{
	width:1020px;
	margin:0 auto;
	overflow:auto;
}

.main{
	margin:15px 0;
}

footer{
	background: #393939;
	color:#fff;
	padding:10px 10px;
	text-align: center;
}

functions.php

<?php
function simple_theme_setup(){
	// Featured Image Support
	add_theme_support('post-thumbnails');
}

add_action('after_setup_theme', 'simple_theme_setup');


// Excerpt Length
function set_excerpt_length(){
	return 60;
}

add_filter('excerpt_length', 'set_excerpt_length');

single.php

<?php get_header(); ?>
	
<div class="main">
		
<div class="container">
			<?php if(have_posts()) : ?>
				<?php while(have_posts()): the_post(); ?>
					
<article class="post">
						
<h3>
							<?php the_title(); ?>
						</h3>

						
<div class="meta">
						Created By <?php the_author(); ?> on <?php the_time('F j, Y g:i a'); ?>
						</div>

						<?php if(has_post_thumbnail()) : ?>
							
<div class="post-thumbnail">
								<?php the_post_thumbnail(); ?>
							</div>

						<?php endif; ?>
						<?php the_content(); ?>			
					</article>

				<?php endwhile; ?>
			<?php else : ?>
				<?php echo wpautop('No se ha encontrado posts'); ?>
			<?php endif; ?>
		</div>

	</div>


<?php get_footer(); ?>