Add header image and Add inline logo and title
This commit is contained in:
parent
034787a7b3
commit
19740ca949
|
@ -15,12 +15,12 @@ if ( ! function_exists( 'marianne_setup' ) ) {
|
|||
* @return void
|
||||
*/
|
||||
function marianne_setup() {
|
||||
// Load translation files.
|
||||
// Loads translation files.
|
||||
load_theme_textdomain( 'marianne', get_template_directory() . '/languages' );
|
||||
|
||||
$marianne_page_width = marianne_get_theme_mod( 'marianne_global_page_width' );
|
||||
|
||||
// Set content-width.
|
||||
// Sets content-width.
|
||||
if ( ! isset( $content_width ) ) {
|
||||
$content_width = absint( $marianne_page_width );
|
||||
}
|
||||
|
@ -28,11 +28,11 @@ if ( ! function_exists( 'marianne_setup' ) ) {
|
|||
// Add default posts and comments RSS feed links to head.
|
||||
add_theme_support( 'automatic-feed-links' );
|
||||
|
||||
// Let WordPress use default document title.
|
||||
// Lets WordPress use default document title.
|
||||
add_theme_support( 'title-tag' );
|
||||
|
||||
/**
|
||||
* Add support for custom logo.
|
||||
* Adds support for custom logo.
|
||||
*
|
||||
* @link https://codex.wordpress.org/Theme_Logo
|
||||
*/
|
||||
|
@ -51,7 +51,7 @@ if ( ! function_exists( 'marianne_setup' ) ) {
|
|||
)
|
||||
);
|
||||
|
||||
// Register the main menu.
|
||||
// Registers the menus.
|
||||
register_nav_menus(
|
||||
array(
|
||||
'primary' => __( 'Primary Menu', 'marianne' ),
|
||||
|
@ -60,7 +60,7 @@ if ( ! function_exists( 'marianne_setup' ) ) {
|
|||
);
|
||||
|
||||
/*
|
||||
* Enable support for Post Thumbnails on posts and pages
|
||||
* Enables support for Post Thumbnails on posts and pages
|
||||
*
|
||||
* @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
|
||||
*
|
||||
|
@ -70,7 +70,7 @@ if ( ! function_exists( 'marianne_setup' ) ) {
|
|||
add_image_size( 'marianne-thumbnails', absint( $marianne_page_width ) );
|
||||
add_image_size( 'marianne-thumbnails-retina', ( absint( $marianne_page_width ) * 2 ) );
|
||||
|
||||
// Add support for responsive oEmbed content.
|
||||
// Adds support for responsive oEmbed content.
|
||||
add_theme_support( 'responsive-embeds' );
|
||||
|
||||
// HTML5 support.
|
||||
|
@ -87,6 +87,22 @@ if ( ! function_exists( 'marianne_setup' ) ) {
|
|||
'style',
|
||||
)
|
||||
);
|
||||
|
||||
/**
|
||||
* Adds support for header image.
|
||||
*
|
||||
* @since Marianne 1.4
|
||||
*/
|
||||
add_theme_support(
|
||||
'custom-header',
|
||||
array(
|
||||
'width' => absint( $marianne_page_width ),
|
||||
'height' => 200,
|
||||
'flex-height' => true,
|
||||
'flex-width' => true,
|
||||
'header-text' => true,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
add_action( 'after_setup_theme', 'marianne_setup' );
|
||||
|
|
31
header.php
31
header.php
|
@ -47,29 +47,12 @@
|
|||
$marianne_page_class .= ' page-width-' . esc_attr( marianne_get_theme_mod( 'marianne_global_page_width' ) );
|
||||
?>
|
||||
<div id="page" <?php marianne_add_class( $marianne_page_class, false ); ?>>
|
||||
|
||||
<?php
|
||||
$marianne_header_class = 'site-header';
|
||||
$marianne_header_class .= ' site-header-align-' . esc_attr( marianne_get_theme_mod( 'marianne_header_align' ) );
|
||||
if ( false === marianne_get_theme_mod( 'marianne_header_logo_title_inline' ) ) {
|
||||
$marianne_header_template = 'default';
|
||||
} else {
|
||||
$marianne_header_template = 'inline-logo-title';
|
||||
}
|
||||
|
||||
get_template_part( 'template-parts/header', $marianne_header_template );
|
||||
?>
|
||||
<header id="header" <?php marianne_add_class( $marianne_header_class, false ); ?> role="banner">
|
||||
<?php
|
||||
$marianne_logo_class = 'site-logo';
|
||||
|
||||
if ( true === marianne_get_theme_mod( 'marianne_header_logo_round' ) ) {
|
||||
$marianne_logo_class .= ' image-circular';
|
||||
}
|
||||
|
||||
marianne_logo( $marianne_logo_class );
|
||||
|
||||
marianne_site_title();
|
||||
|
||||
marianne_site_description();
|
||||
|
||||
if ( 'header' === marianne_get_theme_mod( 'marianne_social_location' ) ) {
|
||||
marianne_social_link( 'header' );
|
||||
}
|
||||
|
||||
marianne_menu_primary();
|
||||
?>
|
||||
</header>
|
||||
|
|
|
@ -295,6 +295,14 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
|
|||
'live' => true,
|
||||
);
|
||||
|
||||
$marianne_customizer_options[] = array(
|
||||
'section' => 'marianne_header',
|
||||
'id' => 'logo_title_inline',
|
||||
'title' => __( 'Put the logo and the title on the same line.', 'marianne' ),
|
||||
'description' => __( 'Default: unchecked', 'marianne' ),
|
||||
'type' => 'checkbox',
|
||||
);
|
||||
|
||||
$marianne_customizer_options[] = array(
|
||||
'section' => 'marianne_header',
|
||||
'id' => 'logo_round',
|
||||
|
@ -779,13 +787,14 @@ if ( ! function_exists( 'marianne_options_default' ) ) {
|
|||
'marianne_global_text_shadow' => false,
|
||||
|
||||
// Header Settings.
|
||||
'marianne_header_align' => 'left',
|
||||
'marianne_header_title_weight' => 'bolder',
|
||||
'marianne_header_desc_weight' => 'normal',
|
||||
'marianne_header_desc_style' => 'normal',
|
||||
'marianne_header_logo_round' => false,
|
||||
'marianne_header_menu_search' => false,
|
||||
'marianne_header_menu_search_text' => '',
|
||||
'marianne_header_align' => 'left',
|
||||
'marianne_header_logo_title_inline' => false,
|
||||
'marianne_header_title_weight' => 'bolder',
|
||||
'marianne_header_desc_weight' => 'normal',
|
||||
'marianne_header_desc_style' => 'normal',
|
||||
'marianne_header_logo_round' => false,
|
||||
'marianne_header_menu_search' => false,
|
||||
'marianne_header_menu_search_text' => '',
|
||||
|
||||
// Content Formatting.
|
||||
'marianne_content_text_align' => 'left',
|
||||
|
|
|
@ -21,10 +21,21 @@ if ( ! function_exists( 'marianne_logo' ) ) {
|
|||
*/
|
||||
function marianne_logo( $class = 'site-logo' ) {
|
||||
if ( has_custom_logo() ) {
|
||||
if ( true === display_header_text() ) {
|
||||
$container = 'div';
|
||||
} else {
|
||||
if ( is_front_page() && ! is_paged() ) {
|
||||
$container = 'h1';
|
||||
} elseif ( is_front_page() || is_home() ) {
|
||||
$container = 'h1';
|
||||
} else {
|
||||
$container = 'div';
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div<?php marianne_add_class( $class ); ?>>
|
||||
<<?php echo esc_html( $container ); ?> <?php marianne_add_class( $class, false ); ?>>
|
||||
<?php the_custom_logo(); ?>
|
||||
</div>
|
||||
</<?php echo esc_html( $container ); ?>>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
@ -622,3 +633,58 @@ if ( ! function_exists( 'marianne_post_links' ) ) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! function_exists( 'marianne_header_image' ) ) {
|
||||
/**
|
||||
* The header image of the site.
|
||||
*
|
||||
* @return void
|
||||
*
|
||||
* @since Marianne 1.3
|
||||
*/
|
||||
function marianne_header_image() {
|
||||
if ( has_header_image() ) {
|
||||
$header_img_src = get_header_image();
|
||||
$header_img_id = attachment_url_to_postid( get_header_image() );
|
||||
$header_img_data = wp_get_attachment_metadata( $header_img_id );
|
||||
|
||||
$header_img_width = absint( $header_img_data['width'] );
|
||||
$header_img_height = absint( $header_img_data['height'] );
|
||||
|
||||
$header_img_responsive_attr = '';
|
||||
|
||||
if ( $header_img_width && $header_img_height ) {
|
||||
$header_img_size_array = array( $header_img_width, $header_img_height );
|
||||
|
||||
$header_img_srcset_value = wp_calculate_image_srcset( $header_img_size_array, $header_img_src, $header_img_data );
|
||||
|
||||
$header_img_sizes_value = wp_calculate_image_sizes( $header_img_size_array, $header_img_src, $header_img_data );
|
||||
|
||||
if ( $header_img_srcset_value && $header_img_sizes_value ) {
|
||||
$header_img_responsive_attr = 'srcset="' . esc_attr( $header_img_srcset_value ) . '" sizes="' . esc_attr( $header_img_sizes_value ) . '"';
|
||||
}
|
||||
}
|
||||
|
||||
if ( true === display_header_text() || has_custom_logo() ) {
|
||||
$container = 'div';
|
||||
|
||||
$header_img_alt = get_post_meta( $header_img_id, '_wp_attachment_image_alt', true );
|
||||
} else {
|
||||
if ( is_front_page() && ! is_paged() ) {
|
||||
$container = 'h1';
|
||||
} elseif ( is_front_page() || is_home() ) {
|
||||
$container = 'h1';
|
||||
} else {
|
||||
$container = 'div';
|
||||
}
|
||||
|
||||
$header_img_alt = get_bloginfo( 'name' );
|
||||
}
|
||||
?>
|
||||
<<?php echo esc_html( $container ); ?> class="site-header-image-container">
|
||||
<img class="site-header-image" src="<?php header_image(); ?>" alt="<?php echo esc_attr( $header_img_alt ); ?>" aria-label="<?php esc_attr_e( 'Header Image', 'marianne' ); ?>" loading="lazy" <?php echo $header_img_responsive_attr; ?>>
|
||||
</<?php echo esc_html( $container ); ?>>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
13
style.css
13
style.css
|
@ -755,6 +755,19 @@ iframe {
|
|||
font-weight: var(--site-desc-weight);
|
||||
margin: .5em 0 0;
|
||||
}
|
||||
.site-identity-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.site-identity-inline .site-logo {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
.site-identity-inline-content {
|
||||
width: 100%;
|
||||
}
|
||||
.site-header-image-container {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
/* Primary menu */
|
||||
#menu-primary-container {
|
||||
|
|
32
template-parts/header-default.php
Normal file
32
template-parts/header-default.php
Normal file
|
@ -0,0 +1,32 @@
|
|||
<?php
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
$marianne_header_class = 'site-header';
|
||||
$marianne_header_class .= ' site-header-align-' . esc_attr( marianne_get_theme_mod( 'marianne_header_align' ) );
|
||||
?>
|
||||
|
||||
<header id="header" <?php marianne_add_class( $marianne_header_class, false ); ?> role="banner">
|
||||
<?php
|
||||
$marianne_logo_class = 'site-logo';
|
||||
|
||||
if ( true === marianne_get_theme_mod( 'marianne_header_logo_round' ) ) {
|
||||
$marianne_logo_class .= ' image-circular';
|
||||
}
|
||||
|
||||
marianne_logo( $marianne_logo_class );
|
||||
|
||||
marianne_site_title();
|
||||
|
||||
marianne_site_description();
|
||||
|
||||
if ( 'header' === marianne_get_theme_mod( 'marianne_social_location' ) ) {
|
||||
marianne_social_link( 'header' );
|
||||
}
|
||||
|
||||
marianne_header_image();
|
||||
|
||||
marianne_menu_primary();
|
||||
?>
|
||||
</header>
|
40
template-parts/header-inline-logo-title.php
Normal file
40
template-parts/header-inline-logo-title.php
Normal file
|
@ -0,0 +1,40 @@
|
|||
<?php
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
$marianne_header_class = 'site-header';
|
||||
$marianne_header_class .= ' site-header-align-' . esc_attr( marianne_get_theme_mod( 'marianne_header_align' ) );
|
||||
?>
|
||||
|
||||
<header id="header" <?php marianne_add_class( $marianne_header_class, false ); ?> role="banner">
|
||||
<?php
|
||||
$marianne_logo_class = 'site-logo';
|
||||
|
||||
if ( true === marianne_get_theme_mod( 'marianne_header_logo_round' ) ) {
|
||||
$marianne_logo_class .= ' image-circular';
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="site-identity-inline">
|
||||
<?php marianne_logo( $marianne_logo_class ); ?>
|
||||
|
||||
<div class="site-identity-inline-content">
|
||||
<?php
|
||||
marianne_site_title();
|
||||
|
||||
marianne_site_description();
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ( 'header' === marianne_get_theme_mod( 'marianne_social_location' ) ) {
|
||||
marianne_social_link( 'header' );
|
||||
}
|
||||
|
||||
marianne_header_image();
|
||||
|
||||
marianne_menu_primary();
|
||||
?>
|
||||
</header>
|
Loading…
Reference in a new issue