Diskuze: Wordpress: zarovnání footeru na střed
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 4 zpráv z 4.
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Nakonec jsem problém vyřešila dříve než mi někdo odpověděl, kdyby náhodou to někdo hledal, tak zde je řešení. Protože jsem nevěděla, v které částí kódu je chyba, vytvořila jsem si nové child téma pro twenty twelve a měnila pouze zápatí a footer, přičemž jsem zjistila, že i v původním kódu je chyba pouze v oblasti footeru. A jediná drobnost byla že jsem ten <div> který měl obalit obsah aby se zařadil doprostřed stránky jsem umisťovala blbě, tedy až za <div id="footer-widgets" class="widget-area three"> a ne za "colophon".
CSS: pro obal a nastavení widgetů
.wrap {width: 1000px;
margin: 0 auto;}
/* ===[ Footer Widget Areas ]=== */
.site-info { clear: both; }
#footer-widgets {
width: 100%;
border-top: none;
}
#footer-widgets .widget li { list-style-type: none; }
.template-front-page #footer-widgets { padding-top: 0; }
@media screen and (min-width: 600px) {
#footer-widgets.three .widget {
float: left;
margin-right: 3.7%;
width: 30.85%;
clear: none;
}
#footer-widgets.three .widget + .widget + .widget { margin-right: 0; }
}
/* for IE8 and IE7 */
.ie #footer-widgets.three .widget {
float: left;
margin-right: 3.7%;
width: 29.85%;
clear: none;
}
.ie #footer-widgets.three .widget + .widget + .widget { margin-right: 0; }
/* Hide footer widgets Homepage Template*/
.template-front-page #footer-widgets { display: none; }CSS footer (kde jsem změnila max-width z 960px na 100%):
footer[role="contentinfo"] {
background-color: black;
border-top: 1px solid #ededed;
clear: both;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 2;
max-width: 100%;
margin-top: 24px;
margin-top: 1.714285714rem;
margin-left: auto;
margin-right: auto;
padding: 24px 0;
padding: 1.714285714rem 0;
}a footer.php, kde jsem konec divu "page" dala hned za "main. wrapper" a umístila widgety a obal widgetů:
</div><!-- #main .wrapper -->
</div><!-- #page -->
<footer id="colophon" role="contentinfo">
<div class="wrap">
<?php
/* footer sidebar */
if ( ! is_404() ) : ?>
<div id="footer-widgets" class="widget-area three">
<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-4' ); ?>
<?php endif; ?>
<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-5' ); ?>
<?php endif; ?>
<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-6' ); ?>
<?php endif; ?>
<?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-7' ); ?>
<?php endif; ?>
</div><!-- #footer-widgets -->
<?php endif; ?>
<div class="site-info">
Bonnie 2014
</div><!-- .site-info --> </div>
</footer><!-- #colophon -->
<?php wp_footer(); ?>
</body>
</html>Kdyby chtěl někdo použít ty widgety tak zde je část functions.php, který jsem si nepatrně poupravila na 4 sloupce místo 3 (proto jsou i v css použity názvy jako "three widget"):
// Register footer widgets
register_sidebar( array(
'name' => __( 'Footer Widget One', 'tto' ),
'id' => 'sidebar-4',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Left Side.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Two', 'tto' ),
'id' => 'sidebar-5',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Center.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Three', 'tto' ),
'id' => 'sidebar-6',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Right Side.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Footer Widget Four', 'tto' ),
'id' => 'sidebar-7',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Right Side.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );Nevím jak moc jsem to napsala pochopitelně nebo ne, ale třeba to pomůže někomu dalšímu. Nevím jak to chodí, ale asi prosím o uzamčení.
nikdo ti neodpověděl, protože se v tom nikdo nechtěl hrabat a navíc wordpress nemáme moc v lásce.
Ok nevadí, zkusila jsem to na více fórech, a hlavně už je to vyřešené.
Zobrazeno 4 zpráv z 4.