# Classic Barber Shop
# Creare si instalare tema child
- Se creeaza folderul `hares-child` in `./themes`, se creeaza fisierul `./style.css` si se adauga:
```css=
/**
Theme Name: Hares Child
Template: hares
Theme URI: https://themeforest.net/item/hares-a-stylish-wordpress-theme/21121953
Author: WolfThemes
Author URI: https://wolfthemes.com
Description: A Stylish WordPress Theme
Version: 1.7.4
Text Domain: hares
*/
```
❗ Trebuie neaparat trecut "template" cu numele temei + Trebuie, ca inainte de a activa tema, sa fie copiate toate setarile din Aspect->Personalizeaza.
# Audit SEO
Site-ul foloseste ca sistem de caching pe server un plugin **W3 Total Cache**, pentru a sterge cache -> Wp-Admin -> Performance -> Cache.
## Homepage
Conditionare post title incat sa fie afisat doar pe articolele de blog (in `./wp-content/themes/hares-child/inc/frontend/template-tags.php` - linia 1000)
```php=
add_action( 'hares_hero_title', 'hares_output_post_title' );
function hares_output_post_title() {
if ( is_author() && class_exists( 'Wolf_Photos' ) ) {
get_template_part( hares_get_template_dirname() . '/components/post/author', 'heading' );
rewind_posts();
} elseif ( hares_get_post_title() ) {
$title = hares_get_post_title();
$title_inline_style = '';
$title_class = 'post-title entry-title';
/* Big text & custom header font */
if ( is_single() || is_page() ) {
$bigtext = get_post_meta( get_the_ID(), '_post_hero_title_bigtext', true );
$font_family = get_post_meta( get_the_ID(), '_post_hero_title_font_family', true );
$font_transform = get_post_meta( get_the_ID(), '_post_hero_title_font_transform', true );
if ( $bigtext ) {
$title_class .= ' wvc-bigtext';
}
if ( $font_family ) {
$title_inline_style .= 'font-family:' . esc_attr( $font_family ) . ';';
}
if ( $font_transform ) {
$title_class .= ' text-transform-' . esc_attr( $font_transform );
}
}
$output = '<h1 itemprop="name" style="' . hares_esc_style_attr( $title_inline_style ) . '" class="' . hares_sanitize_html_classes( $title_class ) . '"><span>' . apply_filters( 'hares_hero_post_title', $title ) . '</span></h1>';
if ( !is_front_page() ) {
echo hares_kses( $output );
}
}
}
```
## Articole de blog
### Adaugare Yoast Breadcrumbs vizual pe pagina articol
[Referinta aici!](https://yoast.com/help/implement-wordpress-seo-breadcrumbs/#utm_source=yoast-seo&utm_medium=software&utm_term=kb-breadcrumbs-how-to&utm_content=settings&utm_campaign=wordpress-support&php_version=7.2&platform=wordpress&platform_version=5.7.2&software=free&software_version=16.0.2&days_active=30plus)
Am copiat **single.php** din tema parinte in tema child *.themes/hares-child/single.php*, si am adaugat inainte de *post content*:
```php=
<?php
get_header();
?>
<div id="primary" class="content-area">
<main id="content" class="site-content clearfix" role="main">
<?php
/* Start the Loop */
while ( have_posts() ) :
the_post();
/* Yoast SEO Breadcrumbs */
?>
<div class="yoastbreadcrumbs_blog wvc-row-wrapper wvc-row-wrapper-width-standard wvc-row-column-equal-height-no">
<div class="wvc-row-content">
<div class="wvc-columns-container">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
</div>
</div>
</div>
<?php
/* Post content */
get_template_part( hares_get_template_dirname() . '/components/post/content', 'single' );
/*
* If comments are open or we have at least one comment, load up the comment template.
*/
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- main#content .site-content-->
</div><!-- #primary .content-area -->
<?php
get_sidebar();
get_footer();
```
Cod in *./themes/hares-child/style.css*:
```css=
/* Table of contents ToC on blog pages */
div#ez-toc-container {
width: 80%;
max-width: 1140px;
margin: 0 auto;
}
.yoastbreadcrumbs_blog {
margin-top: 2rem;
}
.yoastbreadcrumbs_blog p {
margin-bottom: 2rem;
}
```
### Problema article in JSON-LD
In [Structured Data Testing Tool](https://search.google.com/structured-data/testing-tool/u/0/) avem duplicat pentru Articolul de blog, care aparent vine de aici (din cauza acelui itemprop, provenit din `./wp-content/themes/hares-child/inc/frontend/template-tags.php`):
```html
<div id="hero-content">
<div class="post-title-container hero-section"><h1 itemprop="name" class="post-title entry-title"><span>Buzzcut – tunsoarea clasica ceruta in barber shop-urile din Bucuresti</span></h1></div><!-- .post-title-container -->
```
```
WebPage
@type
WebPage
name
Buzzcut – tunsoarea clasica ceruta in barber shop-urile din Bucuresti
datePublished
2021-04-15T00:00:38+00:00
dateModified
2021-06-16T14:48:05+00:00
```
### Implementare custom Schema.org Article
> Pentru punctul E) 5., în momentul verificării, să îmi spuneți dacă schema JSON-LD pentru Article este în regulă. Aceasta este generată in mod automat de modulul Yoast SEO. Problema este că aceasta nu poate fi dezactivată separat din modulul Yoast SEO, dacă încerc dezactivarea generării acestei scheme Article, se va dezactiva AUTOMAT/SIMULTAN și schema pentru Breadcrumbs, ceea ce va necesita implementarea manuală a celor două scheme (Schema Article ȘI Schema Breadcrumbs).
> Deci, dacă schema Article generată de Yoast este în regulă, putem considera punctele E) 3. și E) 5. (JSON-LD Breadcrumbs și Article) finalizate. În caz contrar (daca schema Article generată de Yoast NU este în regulă), voi încerca o implementare custom (sau voi incerca customizarea hook-urilor php din Yoast) care va mai dura câteva ore...
Dezactivare completa generare scheme JSON-LD din Yoast: https://www.prodjex.com/2018/04/how-to-disable-yoast-generated-schema-data/
```php=
// ./themes/hares-child/functions.php
/* Deactivate Yoast SEO Default WebPage Schema for Articles */
add_filter( 'wpseo_json_ld_output', '__return_false' );
```
In `./themes/hares-child/functions.php`. Atentie la proprietatile care apar de doua ori (precum sameAs, valorile acestora trebuie puse intr-un array).
```php=
/* Adauga Schema.org Article in format JSON-LD */
add_action('wp_head', 'add_js_schema_article');
function add_js_schema_article() {
if (get_post_type() === 'post') {
$post = get_post();
$title = isset( $post->post_title ) ? $post->post_title : '';
$description = get_the_excerpt($post);
$date_published = get_the_date($format = 'c');
$date_modified = get_the_modified_date($format = 'c');
$image_URL = get_the_post_thumbnail_url($post);
list($width, $height) = getimagesize($image_URL);
// $width = get_option( 'thumbnail_size_w' );
// $height = get_option( 'thumbnail_size_h' );
$author_nickname = get_the_author_meta($field = 'nickname');
$logo_URL = "https://www.classicbarbershop.ro/wp-content/uploads/2021/01/cropped-LOGO-CLASSICBS-TRANSPARENT.png";
list($logo_width, $logo_height) = getimagesize($logo_URL);
?>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Article",
"headline": "<?php echo($title)?>",
"datePublished": "<?php echo($date_published)?>",
"dateModified": "<?php echo($date_modified)?>",
"description": "<?php echo($description)?>",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.classicbarbershop.ro/blog/"
},
"image": {
"@type": "ImageObject",
"url": "<?php echo($image_URL)?>",
"height": "<?php echo($height)?>",
"width": "<?php echo($width)?>"
},
"author": {
"@type": "Person",
"name": "<?php echo($author_nickname)?>"
},
"publisher": {
"@type": "Organization",
"name": "Classic Barber Shop",
"url": "https://www.classicbarbershop.ro/",
"sameAs": ["https://www.facebook.com/classicbarbershop.ro", "https://www.instagram.com/classicbarbershop.ro/"],
"logo": {
"@type": "ImageObject",
"url": "<?php echo($logo_URL)?>",
"height": "<?php echo($logo_height)?>",
"width": "<?php echo($logo_width)?>"
}
}
}
</script>
<?php
}
}
```
### Implementare custom Breadcrumbs
Doar se adauga urmatorul cod in `./themes/child/functions.php`. Referinta aici https://gist.github.com/jonathanjanssens/225181fad721d6d136af.
```php=
/**
* Add schema to yoast seo breadcrumb
*/
add_filter('wpseo_breadcrumb_links', 'jj_add_crumb_schema', 10, 1);
function jj_add_crumb_schema($crumbs) {
if ( ! is_array( $crumbs ) || $crumbs === array() ) {
return $crumbs;
}
$listItems = [];
$j = 1;
foreach ( $crumbs as $i => $crumb ) {
$item = [];
if ( isset( $crumb['id'] ) ) {
$item = [
'@id' => get_permalink($crumb['id']),
'name' => strip_tags( get_the_title( $id ) )
];
}
if ( isset( $crumb['term'] ) ) {
$term = $crumb['term'];
$item = [
'@id' => get_term_link( $term ),
'name' => $term->name
];
}
if ( isset( $crumb['ptarchive'] ) ) {
$postType = get_post_type_object($crumb['ptarchive']);
$item = [
'@id' => get_post_type_archive_link($crumb['ptarchive']),
'name' => $postType->label
];
}
if(isset($crumb['url'])) {
if($crumb['text'] !== '') {
$title = $crumb['text'];
} else {
$title = get_bloginfo('name');
}
$item = [
'@id' => $crumb['url'],
'name' => $title
];
}
$listItem = [
'@type' => 'ListItem',
'position' => $j,
'item' => $item
];
$listItems[] = $listItem;
$j++;
}
$schema = [
'@context' => 'http://schema.org',
'@type' => 'BreadcrumbList',
'itemListElement' => $listItems
];
$html = '<script type="application/ld+json">' . json_encode($schema) . '</script> ';
echo $html;
return $crumbs;
}
```
---
### Sectiune de articole similare folosind Owl Carousel
Se adauga cele 3 fisiere CSS si JS de la [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/) in `./child-theme`, si se insereaza in `./child-theme/functions.php`:
```php=
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts', 100 );
function enqueue_custom_scripts() {
/* Enqueue parent style */
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
/* Enqueue custom style and scripts */
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri().'/js/custom-script.js' );
wp_enqueue_style( 'owl-carousel-theme', get_stylesheet_directory_uri().'/css/owl.theme.default.min.css', array() );
wp_enqueue_style( 'owl-carousel', get_stylesheet_directory_uri().'/css/owl.carousel.min.css', array() );
wp_enqueue_script( 'owl-carousel-scipt', get_stylesheet_directory_uri().'/js/owl.carousel.min.js', array());
}
```
Apoi in `./child-theme/single.php` adaugam intr-un `<div>` `wvc-row-wrapper > wvc-row-content > wvc-columns-container` codul pentru articole blog, iar mai jos putem insera direct scriptul JS...:
```php=
<?php
/**
* The template for displaying all single posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Hares
* @version 1.7.4
*/
get_header();
?>
<div id="primary" class="content-area">
<main id="content" class="site-content clearfix" role="main">
<?php
/* Start the Loop */
while ( have_posts() ) :
the_post();
/* Yoast SEO Breadcrumbs */
?>
<div class="yoastbreadcrumbs_blog wvc-row-wrapper wvc-row-wrapper-width-standard wvc-row-column-equal-height-no">
<div class="wvc-row-content">
<div class="wvc-columns-container">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
</div>
</div>
</div>
<?php
/* Post content */
get_template_part( hares_get_template_dirname() . '/components/post/content', 'single' );
/*
* Articole asemanatoare, Related posts, Related articles
*/
?>
<div class="wvc-row-wrapper wvc-row-wrapper-width-standard wvc-row-column-equal-height-no">
<div class="section_relatedposts_title">Articole similare</div>
<div class="wvc-row-content">
<div class="wvc-columns-container">
<div id="owl-carousel-post" class="owl-carousel">
<?php
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 8, // Number of related posts to display.
'caller_get_posts'=> 1
);
$my_query = new wp_query( $args );
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<div class="owl-carousel-item">
<a href="<? the_permalink()?>"><?php the_post_thumbnail("medium"); ?>
<p><?php the_title(); ?></p>
</a>
</div>
<? }
}
$post = $orig_post;
wp_reset_query();
?>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function() {
if (jQuery("#owl-carousel-post").length) {
jQuery("#owl-carousel-post").owlCarousel({
items: 5,
margin: 20,
responsive : {
0: {
items: 2
},
480: {
items : 3
},
550: {
items: 4
},
768: {
items: 5
}
}
}
);
}
});
</script>
<?php
/*
* If comments are open or we have at least one comment, load up the comment template.
*/
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- main#content .site-content-->
</div><!-- #primary .content-area -->
<?php
get_sidebar();
get_footer();
```
Putem introduce si cateva spatieri in `./child-theme/style.css`
```css=
.owl-carousel {
margin: 2rem 0;
}
.owl-carousel-item img {
margin-bottom: 1rem;
height: 150px;
}
.section_relatedposts_title {
font-size: 3rem;
font-family: 'Montserrat';
text-transform: uppercase;
letter-spacing: 3px;
}
```
Sign in with Wallet
Connect another wallet