Ví dụ cách viết header cho giao diện

Hướng dẫn viết code cho header trên giao diện mẫu của HocWP Team. Tập tin header sẽ nằm tại đường dẫn custom → views → module-site-header.php, ví dụ này dựa trên Bootstrap và Font Awesome được tải bởi plugin Bootstrap and Font Awesome by HocWP Team.

<div class="container">
	<div class="row">
		<div class="col-sm-12 col-md-3 col-lg-5 col-logo">
			<?php do_action( 'hocwp_theme_site_branding' ); ?>
			<button type="button" class="navbar-toggle visible-sm visible-xs" data-toggle="collapse"
			        data-target="#main-menu">
				<span class="sr-only"><?php _e( 'Toggle navigation', 'hocwp-theme' ); ?></span>
				<i class="fa fa-bars" aria-hidden="true"></i>
			</button>
		</div>
		<div class="col-sm-12 col-md-9 col-lg-7 col-btn-text">
			<div class="row">
				<?php
				global $hocwp_theme;
				$options = $hocwp_theme->options['general'];
				$ht      = isset( $options['header_text'] ) ? $options['header_text'] : '';
				$hb      = isset( $options['header_button'] ) ? $options['header_button'] : '';
				if ( ! empty( $hb ) && ! empty( $ht ) ) {
					?>
					<div class="col-sm-12 col-md-5 col-lg-4 header-button">
						<div class="pull-right">
							<?php echo wpautop( $hb ); ?>
						</div>
					</div>
					<div class="col-sm-12 col-md-7 col-lg-8 header-text">
						<div class="pull-right">
							<?php echo wpautop( $ht ); ?>
						</div>
					</div>
					<?php
				} else {
					if ( ! empty( $hb ) ) {
						?>
						<div class="col-md-12 header-button">
							<div class="pull-right">
								<?php echo wpautop( $hb ); ?>
							</div>
						</div>
						<?php
					}
					if ( ! empty( $ht ) ) {
						?>
						<div class="col-md-9 header-text">
							<div class="pull-right">
								<?php echo wpautop( $ht ); ?>
							</div>
						</div>
						<?php
					}
				}
				?>
			</div>
		</div>
	</div>
</div>

Không có bình luận.

Bạn có thể trở thành người đầu tiên để lại bình luận.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *