We use cookies to ensure you get the best experience on our website
Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
0ct0pu5
/
themes-wordpress
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

Merge pull request #2731 from Automattic/add/support-for-site-logo

Spearhead: Add support for site logo
Ben Dwyer 4 yıl önce
ebeveyn
05abddce9b 983e9b07d3
işleme
d037d03166
17 değiştirilmiş dosya ile 176 ekleme ve 48 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 13 14
      seedlet/assets/sass/components/header/_header-branding.scss
  2. 8 3
      seedlet/header.php
  3. 35 0
      seedlet/inc/customizer.php
  4. 7 7
      seedlet/style-rtl.css
  5. 7 7
      seedlet/style.css
  6. 0 0
      seedlet/style.css.map
  7. 18 13
      seedlet/template-parts/header/site-branding.php
  8. 13 0
      spearhead/assets/sass/_header.scss
  9. 14 0
      spearhead/assets/sass/navigation.scss
  10. 0 0
      spearhead/customize.php
  11. 9 4
      spearhead/header.php
  12. 13 0
      spearhead/navigation-rtl.css
  13. 13 0
      spearhead/navigation.css
  14. 0 0
      spearhead/navigation.css.map
  15. 13 0
      spearhead/style-rtl.css
  16. 13 0
      spearhead/style.css
  17. 0 0
      spearhead/style.css.map

+ 13 - 14
seedlet/assets/sass/components/header/_header-branding.scss
Dosyayı Görüntüle 

@@ -25,7 +25,7 @@
 
 		color: currentColor;
 
 		font-weight: var(--branding--title--font-weight);
 
 		text-shadow:
 
-			1px 0px var(--global--color-background), 
+			1px 0px var(--global--color-background),
 
 			-1px 0px var(--global--color-background),
 
 			-2px 0px var(--global--color-background),
 
 			2px 0px var(--global--color-background),
 
@@ -33,7 +33,7 @@
 
 			3px 0px var(--global--color-background),
 
 			-4px 0px var(--global--color-background),
 
 			4px 0px var(--global--color-background),
 
-			-5px 0px var(--global--color-background), 
+			-5px 0px var(--global--color-background),
 
 			5px 0px var(--global--color-background);
 
 		transition: background-size 0.1s ease-out;
 
 
@@ -51,7 +51,7 @@
 
 
 		&::selection {
 
 			text-shadow:
 
-				1px 0px var(--global--color-text-selection), 
+				1px 0px var(--global--color-text-selection),
 
 				-1px 0px var(--global--color-text-selection),
 
 				-2px 0px var(--global--color-text-selection),
 
 				2px 0px var(--global--color-text-selection),
 
@@ -59,7 +59,7 @@
 
 				3px 0px var(--global--color-text-selection),
 
 				-4px 0px var(--global--color-text-selection),
 
 				4px 0px var(--global--color-text-selection),
 
-				-5px 0px var(--global--color-text-selection), 
+				-5px 0px var(--global--color-text-selection),
 
 				5px 0px var(--global--color-text-selection);
 
 		}
 
 	}
 
@@ -94,21 +94,20 @@ nav a {
 
 // Site logo
 
 
 .site-logo {
 
-
 
 	margin: calc( var(--global--spacing-vertical) / 2 ) var(--global--spacing-horizontal);
 
+	text-align: center;
 
 
 	.custom-logo {
 
-		max-width: var(--branding--logo--max-width-mobile);
 
-		max-height: var(--branding--logo--max-height-mobile);
 
+		max-width: var(--branding--logo--max-width);
 
+		max-height: var(--branding--logo--max-height);
 
 		height: auto;
 
 	}
 
+}
 
 
-	@include media(mobile) {
 
-	
-		.custom-logo {
 
-			max-width: var(--branding--logo--max-width);
 
-			max-height: var(--branding--logo--max-height);
 
-			height: auto;
 
-		}
 
+// TODO - this should probably go in the variables declartion but we need the mixin...
 
+@include media(mobile-only) {
 
+	:root {
 
+		--branding--logo--max-width: var(--branding--logo--max-width-mobile);
 
+		--branding--logo--max-height: var(--branding--logo--max-height-mobile);
 
 	}
 
 }

+ 8 - 3
seedlet/header.php
Dosyayı Görüntüle 

@@ -9,6 +9,11 @@
 
  * @package Seedlet
 
  * @since 1.0.0
 
  */
 
+$has_primary_nav = has_nav_menu( 'primary' );
 
+$header_classes  = 'site-header header_classes';
 
+$header_classes .= has_custom_logo() ? ' has-logo' : '';
 
+$header_classes .= true === get_theme_mod( 'display_title_and_tagline', true ) ? ' has-title-and-tagline' : '';
 
+$header_classes .= $has_primary_nav ? ' has-menu' : '';
 
 ?><!doctype html>
 
 <html <?php language_attributes(); ?>>
 
 <head>
 
@@ -23,10 +28,10 @@
 
 <div id="page" class="site">
 
 	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'seedlet' ); ?></a>
 
 
-		<header id="masthead" class="site-header default-max-width" role="banner">
 
+		<header id="masthead" class="<?php echo $header_classes; ?>" role="banner">
 
 			<?php get_template_part( 'template-parts/header/site-branding' ); ?>
 
 
-			<?php if ( has_nav_menu( 'primary' ) ) : ?>
 
+			<?php if ( $has_primary_nav ) : ?>
 
 				<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'seedlet' ); ?>">
 
 					<button id="primary-close-menu" class="button close">
 
 						<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
 
@@ -52,7 +57,7 @@
 
 			<?php endif; ?>
 
 
 			<div class="menu-button-container">
 
-				<?php if ( has_nav_menu( 'primary' ) ) : ?>
 
+				<?php if ( $has_primary_nav ) : ?>
 
 					<button id="primary-open-menu" class="button open">
 
 						<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
 
 						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>

+ 35 - 0
seedlet/inc/customizer.php
Dosyayı Görüntüle 

@@ -118,6 +118,26 @@ if ( ! class_exists( 'Seedlet_Customize' ) ) {
 
 					),
 
 				)
 
 			);
 
+
 
+			// Add "display_title_and_tagline" setting for displaying the site-title & tagline.
 
+			$wp_customize->add_setting(
 
+				'display_title_and_tagline',
 
+				array(
 
+					'capability'        => 'edit_theme_options',
 
+					'default'           => true,
 
+					'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
 
+				)
 
+			);
 
+
 
+			// Add control for the "display_title_and_tagline" setting.
 
+			$wp_customize->add_control(
 
+				'display_title_and_tagline',
 
+				array(
 
+					'type'    => 'checkbox',
 
+					'section' => 'title_tagline',
 
+					'label'   => esc_html__( 'Display Site Title & Tagline', 'seedlet' ),
 
+				)
 
+			);
 
 		}
 
 
 		/**
 
@@ -145,6 +165,21 @@ if ( ! class_exists( 'Seedlet_Customize' ) ) {
 
 		public function partial_blogdescription() {
 
 			bloginfo( 'description' );
 
 		}
 
+
 
+		/**
 
+		 * Sanitize boolean for checkbox.
 
+		 *
 
+		 * @access public
 
+		 *
 
+		 * @since 1.0.0
 
+		 *
 
+		 * @param bool $checked Whether or not a box is checked.
 
+		 *
 
+		 * @return bool
 
+		 */
 
+		public static function sanitize_checkbox( $checked = null ) {
 
+			return (bool) isset( $checked ) && true === $checked;
 
+		}
 
 	}
 
 
 	new Seedlet_Customize();

+ 7 - 7
seedlet/style-rtl.css
Dosyayı Görüntüle 

@@ -2965,19 +2965,19 @@ nav a {
 
 
 .site-logo {
 
 	margin: calc( var(--global--spacing-vertical) / 2) var(--global--spacing-horizontal);
 
+	text-align: center;
 
 }
 
 
 .site-logo .custom-logo {
 
-	max-width: var(--branding--logo--max-width-mobile);
 
-	max-height: var(--branding--logo--max-height-mobile);
 
+	max-width: var(--branding--logo--max-width);
 
+	max-height: var(--branding--logo--max-height);
 
 	height: auto;
 
 }
 
 
-@media only screen and (min-width: 482px) {
 
-	.site-logo .custom-logo {
 
-		max-width: var(--branding--logo--max-width);
 
-		max-height: var(--branding--logo--max-height);
 
-		height: auto;
 
+@media only screen and (max-width: 481px) {
 
+	:root {
 
+		--branding--logo--max-width: var(--branding--logo--max-width-mobile);
 
+		--branding--logo--max-height: var(--branding--logo--max-height-mobile);
 
 	}
 
 }

+ 7 - 7
seedlet/style.css
Dosyayı Görüntüle 

@@ -2986,19 +2986,19 @@ nav a {
 
 
 .site-logo {
 
 	margin: calc( var(--global--spacing-vertical) / 2) var(--global--spacing-horizontal);
 
+	text-align: center;
 
 }
 
 
 .site-logo .custom-logo {
 
-	max-width: var(--branding--logo--max-width-mobile);
 
-	max-height: var(--branding--logo--max-height-mobile);
 
+	max-width: var(--branding--logo--max-width);
 
+	max-height: var(--branding--logo--max-height);
 
 	height: auto;
 
 }
 
 
-@media only screen and (min-width: 482px) {
 
-	.site-logo .custom-logo {
 
-		max-width: var(--branding--logo--max-width);
 
-		max-height: var(--branding--logo--max-height);
 
-		height: auto;
 
+@media only screen and (max-width: 481px) {
 
+	:root {
 
+		--branding--logo--max-width: var(--branding--logo--max-width-mobile);
 
+		--branding--logo--max-height: var(--branding--logo--max-height-mobile);
 
 	}
 
 }

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
seedlet/style.css.map


+ 18 - 13
seedlet/template-parts/header/site-branding.php
Dosyayı Görüntüle 

@@ -5,27 +5,32 @@
 
  * @package Seedlet
 
  * @since 1.0.0
 
  */
 
+$blog_info    = get_bloginfo( 'name' );
 
+$description  = get_bloginfo( 'description', 'display' );
 
+$show_title   = ( true === get_theme_mod( 'display_title_and_tagline', true ) );
 
+$header_class = $show_title ? 'site-title' : 'screen-reader-text';
 
+
 
 ?>
 
-<div class="site-branding">
 
 
-	<?php if ( has_custom_logo() ) : ?>
 
+<?php if ( has_custom_logo() && $show_title ) : ?>
 
+	<div class="site-logo"><?php the_custom_logo(); ?></div>
 
+<?php endif; ?>
 
+
 
+<div class="site-branding">
 
+	<?php if ( has_custom_logo() && ! $show_title ) : ?>
 
 		<div class="site-logo"><?php the_custom_logo(); ?></div>
 
 	<?php endif; ?>
 
-	<?php $blog_info = get_bloginfo( 'name' ); ?>
 
-	<?php if ( ! empty( $blog_info ) ) : ?>
 
+	<?php if ( ! empty( $blog_info ) && $show_title ) : ?>
 
 		<?php if ( is_front_page() && is_home() ) : ?>
 
-			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 
+			<h1 class="<?php echo esc_attr( $header_class ); ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo $blog_info; ?></a></h1>
 
 		<?php else : ?>
 
-			<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
 
+			<p class="<?php echo esc_attr( $header_class ); ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo $blog_info; ?></a></p>
 
 		<?php endif; ?>
 
 	<?php endif; ?>
 
 
-	<?php
 
-	$description = get_bloginfo( 'description', 'display' );
 
-	if ( $description || is_customize_preview() ) :
 
-	?>
 
-			<p class="site-description">
 
-				<?php echo $description; ?>
 
-			</p>
 
+	<?php if ( ( $description || is_customize_preview() ) && $show_title ) : ?>
 
+		<p class="site-description">
 
+			<?php echo $description; ?>
 
+		</p>
 
 	<?php endif; ?>
 
 </div><!-- .site-branding -->

+ 13 - 0
spearhead/assets/sass/_header.scss
Dosyayı Görüntüle 

@@ -30,6 +30,7 @@ $site-branding-height: 68px;
 
 
 .site-header {
 
 	display: flex;
 
+	flex-wrap: wrap;
 
 	justify-content: space-between;
 
 	max-width: var(--responsive--alignfull-width);
 
 	padding: var(--global--spacing-horizontal);
 
@@ -43,6 +44,7 @@ $site-branding-height: 68px;
 
 	}
 
 
 	.site-branding {
 
+		flex-basis: 30%;
 
 		flex-grow: 1;
 
 		text-align: left;
 
 
@@ -58,10 +60,12 @@ $site-branding-height: 68px;
 
 		.site-logo {
 
 			margin-left: 0;
 
 			margin-top: 0;
 
+			text-align: left;
 
 		}
 
 	}
 
 
 	.primary-navigation {
 
+		flex-basis: 70%;
 
 		flex-grow: 4;
 
 		margin-top: 0;
 
 
@@ -159,6 +163,15 @@ $site-branding-height: 68px;
 
 	}
 
 }
 
 
+.has-title-and-tagline .site-logo {
 
+	flex-basis: 100%;
 
+	margin-bottom: var(--global--spacing-vertical);
 
+}
 
+
 
+.primary-navigation-open .has-title-and-tagline .site-logo {
 
+	display: none;
 
+}
 
+
 
 
 .site-header div.menu-button-container {
 
 	button#primary-open-menu {

+ 14 - 0
spearhead/assets/sass/navigation.scss
Dosyayı Görüntüle 

@@ -61,4 +61,18 @@ div.extra-navigation-wrapper {
 
 		opacity: 1;
 
 		transform: translateY( $header-height );
 
 	}
 
+
 
+	$menu-offset-with-logo: calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ) );
 
+	.primary-navigation-open .has-logo:not(.has-title-and-tagline) & {
 
+		transform: translateY( $menu-offset-with-logo );
 
+		bottom: $menu-offset-with-logo;
 
+	}
 
+}
 
+
 
+.has-logo.has-title-and-tagline .menu-button-container {
 
+	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical) );
 
+
 
+	.admin-bar & {
 
+		top: calc( var(--wpadmin-bar--height) + var(--branding--logo--max-height) + var(--global--spacing-vertical) );
 
+	}
 
 }

+ 0 - 0
spearhead/customize.php
Dosyayı Görüntüle


+ 9 - 4
spearhead/header.php
Dosyayı Görüntüle 

@@ -9,6 +9,11 @@
 
  * @package Spearhead
 
  * @since 1.0.0
 
  */
 
+$has_primary_nav = has_nav_menu( 'primary' );
 
+$header_classes  = 'site-header header_classes';
 
+$header_classes .= has_custom_logo() ? ' has-logo' : '';
 
+$header_classes .= true === get_theme_mod( 'display_title_and_tagline', true ) ? ' has-title-and-tagline' : '';
 
+$header_classes .= $has_primary_nav ? ' has-menu' : '';
 
 ?><!doctype html>
 
 <html <?php language_attributes(); ?>>
 
 <head>
 
@@ -23,10 +28,10 @@
 
 <div id="page" class="site">
 
 	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'seedlet' ); ?></a>
 
 
-		<header id="masthead" class="site-header default-max-width" role="banner">
 
+		<header id="masthead" class="<?php echo $header_classes; ?>" role="banner">
 
 			<?php get_template_part( 'template-parts/header/site-branding' ); ?>
 
 
-			<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
 
+			<?php if ( $has_primary_nav || has_nav_menu( 'social' ) ) : ?>
 
 				<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'seedlet' ); ?>">
 
 					<button id="primary-close-menu" class="button close">
 
 						<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
 
@@ -34,7 +39,7 @@
 
 					</button>
 
 					<div class="extra-navigation-wrapper">
 
 						<?php
 
-						if ( has_nav_menu( 'primary' ) ) :
 
+						if ( $has_primary_nav ) :
 
 							// Get menu slug
 
 							$location_name = 'primary';
 
 							$locations     = get_nav_menu_locations();
 
@@ -67,7 +72,7 @@
 
 			<?php endif; ?>
 
 
 			<div class="menu-button-container">
 
-				<?php if ( has_nav_menu( 'primary' ) ) : ?>
 
+				<?php if ( $has_primary_nav ) : ?>
 
 					<button id="primary-open-menu" class="button open">
 
 						<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
 
 						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>

+ 13 - 0
spearhead/navigation-rtl.css
Dosyayı Görüntüle 

@@ -572,4 +572,17 @@
 
 	visibility: visible;
 
 	opacity: 1;
 
 	transform: translateY(80px);
 
+}
 
+
 
+.primary-navigation-open .has-logo:not(.has-title-and-tagline) div.extra-navigation-wrapper {
 
+	transform: translateY(calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) )));
 
+	bottom: calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ));
 
+}
 
+
 
+.has-logo.has-title-and-tagline .menu-button-container {
 
+	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical));
 
+}
 
+
 
+.admin-bar .has-logo.has-title-and-tagline .menu-button-container {
 
+	top: calc( var(--wpadmin-bar--height) + var(--branding--logo--max-height) + var(--global--spacing-vertical));
 
 }

+ 13 - 0
spearhead/navigation.css
Dosyayı Görüntüle 

@@ -574,4 +574,17 @@
 
 	transform: translateY(80px);
 
 }
 
 
+.primary-navigation-open .has-logo:not(.has-title-and-tagline) div.extra-navigation-wrapper {
 
+	transform: translateY(calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) )));
 
+	bottom: calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ));
 
+}
 
+
 
+.has-logo.has-title-and-tagline .menu-button-container {
 
+	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical));
 
+}
 
+
 
+.admin-bar .has-logo.has-title-and-tagline .menu-button-container {
 
+	top: calc( var(--wpadmin-bar--height) + var(--branding--logo--max-height) + var(--global--spacing-vertical));
 
+}
 
+
 
 /*# sourceMappingURL=navigation.css.map */

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
spearhead/navigation.css.map


+ 13 - 0
spearhead/style-rtl.css
Dosyayı Görüntüle 

@@ -233,6 +233,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 
 .site-header {
 
 	display: flex;
 
+	flex-wrap: wrap;
 
 	justify-content: space-between;
 
 	max-width: var(--responsive--alignfull-width);
 
 	padding: var(--global--spacing-horizontal);
 
@@ -251,6 +252,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 }
 
 
 .site-header .site-branding {
 
+	flex-basis: 30%;
 
 	flex-grow: 1;
 
 	text-align: right;
 
 }
 
@@ -267,9 +269,11 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .site-branding .site-logo {
 
 	margin-right: 0;
 
 	margin-top: 0;
 
+	text-align: right;
 
 }
 
 
 .site-header .primary-navigation {
 
+	flex-basis: 70%;
 
 	flex-grow: 4;
 
 	margin-top: 0;
 
 }
 
@@ -363,6 +367,15 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 	color: var(--primary-nav--color-link-hover);
 
 }
 
 
+.has-title-and-tagline .site-logo {
 
+	flex-basis: 100%;
 
+	margin-bottom: var(--global--spacing-vertical);
 
+}
 
+
 
+.primary-navigation-open .has-title-and-tagline .site-logo {
 
+	display: none;
 
+}
 
+
 
 .site-header div.menu-button-container button#primary-open-menu {
 
 	margin-top: 0;
 
 	margin-left: 0;

+ 13 - 0
spearhead/style.css
Dosyayı Görüntüle 

@@ -233,6 +233,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 
 .site-header {
 
 	display: flex;
 
+	flex-wrap: wrap;
 
 	justify-content: space-between;
 
 	max-width: var(--responsive--alignfull-width);
 
 	padding: var(--global--spacing-horizontal);
 
@@ -251,6 +252,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 }
 
 
 .site-header .site-branding {
 
+	flex-basis: 30%;
 
 	flex-grow: 1;
 
 	text-align: left;
 
 }
 
@@ -267,9 +269,11 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .site-branding .site-logo {
 
 	margin-left: 0;
 
 	margin-top: 0;
 
+	text-align: left;
 
 }
 
 
 .site-header .primary-navigation {
 
+	flex-basis: 70%;
 
 	flex-grow: 4;
 
 	margin-top: 0;
 
 }
 
@@ -363,6 +367,15 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 	color: var(--primary-nav--color-link-hover);
 
 }
 
 
+.has-title-and-tagline .site-logo {
 
+	flex-basis: 100%;
 
+	margin-bottom: var(--global--spacing-vertical);
 
+}
 
+
 
+.primary-navigation-open .has-title-and-tagline .site-logo {
 
+	display: none;
 
+}
 
+
 
 .site-header div.menu-button-container button#primary-open-menu {
 
 	margin-top: 0;
 
 	margin-right: 0;

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
spearhead/style.css.map


Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5