Thứ Tư, 3 tháng 8, 2016

Hướng dẫn Theme GoMedia WordPress toàn tập

theme wp

Nếu các bạn muốn làm một trang web tạp chí trực tuyến, một trang web tin tức, một trang web cá nhân nơi chia sẽ của bạn hay một trang web của cộng đồng thì Theme GoMedia là một Theme đúng với sự chọn lựa của bạn. GoMedia là một WordPress Theme được phát triển bởi nhà cung cấp theme-junkie.com. Sau đây tôi sẽ hướng dẫn cho các bạn chi tiết về Theme GoMedia này.

1. Hướng dẫn cài đặt Theme GoMedia

Xem thêm: Các cách cài đặt Theme và Plugin WordPress

Khi các bạn mua Theme GoMedia thì các bạn sẽ nhận được Link tải theme này về từ nhà cung cấp theme-junkie.com. Sau đó các bạn tải về file theme zip và bắt đầu cài đặt:
Bạn vào Appearance >> Themes >> Add New >> Upload Theme
Hướng dẫn Theme GoMedia WordPress toàn tậpSau đó Chọn tệp >> Install Now
Hướng dẫn Theme GoMedia WordPress toàn tậpSau khi các bạn bấm vào nút ACTIVE thì nó sẽ hiện bản bên dưới yêu cầu bạn cài thêm các plugin dùng kèm.
Hướng dẫn Theme GoMedia WordPress toàn tậpChú ý rằng: Các plugin trên các bạn có thể không cần cài đặt hoặc cài đặt sau.

2. Tìm hiểu các thành phần có trong Theme GoMedia

2.1 Hình tổng quan các phần có trong theme

Hướng dẫn Theme GoMedia WordPress toàn tập

2.2 General (Appearance >> Theme Settings)

Hướng dẫn Theme GoMedia WordPress toàn tập

2.3 Home Page (Appearance >> Theme Settings)

Hướng dẫn Theme GoMedia WordPress toàn tậpNhư hình trên số -1 có nghĩa là các bạn cho phép hiển thị tất cả. Các bạn có thể chọn 5 để cho phép hiển thị 5, nói chung là tùy ý các bạn chọn

2.4 Single Post (Appearance >> Theme Settings)

Hướng dẫn Theme GoMedia WordPress toàn tập

2.5 Social Links (Appearance >> Theme Settings)

Hướng dẫn Theme GoMedia WordPress toàn tập

2.6 404 Page (Appearance >> Theme Settings)

Hướng dẫn Theme GoMedia WordPress toàn tập

2.7 Advertisement (Appearance >> Theme Settings)

Hướng dẫn Theme GoMedia WordPress toàn tập

2.8 Custom Code (Appearance >> Theme Settings)

Theme GoMedia 12

3. Các điều cần biết về Theme GoMedia WordPress

3.1 Menu và Widget

– Theme này sẽ có 03 menu như hình bên dưới:
Hướng dẫn Theme GoMedia WordPress toàn tập– Theme này sẽ phát sinh ra một số Widget và Sidebar như hình dưới
Hướng dẫn Theme GoMedia WordPress toàn tập

3.2 Xoá chữ: GoMedia by ThemeJunkie (số 14) nằm ở góc dưới bên phải

Các bạn làm như sau Dashboard -> Appearance -> Editor -> Tìm footer.php -> xoá đoạn sau:

<?php printf( __( 'Theme: %1$s by %2$s.', 'gomedia' ), 'GoMedia', '<a href="http://ift.tt/WkLsYK" rel="designer">ThemeJunkie</a>' ); ?>

Hướng dẫn Theme GoMedia WordPress toàn tập

3.3 Khắc phục lỗi khung soạn thảo trên Theme GoMedia

Hướng dẫn Theme GoMedia WordPress toàn tậpĐể khắc phục lỗi khung soạn thảo các bạn vào đường dẫn sau:
wp-content/themes/gomedia/assets/css/editor-style.css mở tập tin editor-style.css. Sau đó thay thế toàn bộ bằng đoạn này:

html .mceContentBody {
  font-size: 15px;
  max-width: 730px;
}
 
body {
  color: #23292b;
  font-family: Arial, sans-serif;
  font-weight: normal;
  line-height: 21px;
  vertical-align: baseline;
}
 
blockquote {
  border-left: 5px solid #cccccc;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 400;
  color: #888;
  font-style: italic;
  padding-left: 20px;
}
 
p {
  margin-bottom: 20px;
  color: #555;
}

Sau đó các bạn xoá cache và truy cập vào: http://ten-mien-cua-ban.com/wp-content/themes/gomedia/assets/css/editor-style.css và thấy file như đoạn code trên thì các bạn thành công.
Hướng dẫn Theme GoMedia WordPress toàn tập

3.4 Tạo Featured Section 2 cột trên Theme GoMedia

Hướng dẫn Theme GoMedia WordPress toàn tậpHướng dẫn Theme GoMedia WordPress toàn tậpCác bạn truy cập vào Dashboard >> Appearance >> Editor >> sau đó mở file front.php lên. Và thay thế toàn bộ bằng đoạn sau và lưu lại:

<?php get_header(); ?>
 
 <div class="container">
 <div class="row">
 
 <div id="content" class="col-md-9">
 
 <?php if ( of_get_option( 'gomedia_featured_posts', '1' ) ) { ?>
 <section id="featured-content" class="row clearfix">
 
 <?php $tag = of_get_option( 'gomedia_featured_tag' ); ?>
 
 <?php $featured = get_posts( array( 'posts_per_page' => 3, 'tag_id' => $tag ) ); ?>
 
 <?php if ( $tag && $featured ) : ?>
 
 <div id="featured-right" class="col-md-6">
 
 <ul>
 <?php foreach ( $featured as $post ) : setup_postdata( $post ); ?>
 
 <li class="plain-item <?php if ( ++$i == 3 ) { echo 'last-item'; } ?> clearfix">
 <a href="<?php the_permalink(); ?>" rel="bookmark">
 
 <?php if ( has_post_thumbnail() ) : ?>
 <?php the_post_thumbnail( 'gomedia-featured-small', array( 'class' => 'entry-thumb', 'alt' => esc_attr( get_the_title() ) ) ); ?>
 <?php endif; ?>
 
 <div class="plain-title">
 <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
 <div class="entry-meta"><?php printf( __( 'by %s', 'gomedia' ), esc_attr( get_the_author() ) ) ?></div><!-- .entry-meta -->
 </div><!-- .carousel-caption -->
 
 </a>
 </li>
 
 <?php endforeach; ?>
 </ul>
 
 </div>
 
 <?php endif; wp_reset_postdata(); ?>
 
 <?php $featured2 = get_posts( array( 'posts_per_page' => 3, 'offset' => 3, 'tag_id' => $tag ) ); ?>
 
 <?php if ( $tag && $featured2 ) : ?>
 <?php $i = 0; ?>
 
 <div id="featured-right" class="col-md-6">
 
 <ul>
 <?php foreach ( $featured2 as $post ) : setup_postdata( $post ); ?>
 
 <li class="plain-item <?php if ( ++$i == 3 ) { echo 'last-item'; } ?> clearfix">
 <a href="<?php the_permalink(); ?>" rel="bookmark">
 
 <?php if ( has_post_thumbnail() ) : ?>
 <?php the_post_thumbnail( 'gomedia-featured-small', array( 'class' => 'entry-thumb', 'alt' => esc_attr( get_the_title() ) ) ); ?>
 <?php endif; ?>
 
 <div class="plain-title">
 <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
 <div class="entry-meta"><?php printf( __( 'by %s', 'gomedia' ), esc_attr( get_the_author() ) ) ?></div><!-- .entry-meta -->
 </div><!-- .carousel-caption -->
 
 </a>
 </li>
 
 <?php endforeach; ?>
 </ul>
 
 </div>
 
 <?php endif; wp_reset_postdata(); ?>
 
 </section><!-- #featured-content -->
 <?php } ?>
 
 <?php $ad = of_get_option( 'gomedia_home_ads' ); ?>
 <?php if ( $ad ) { ?>
 <div class="home-ad">
 <?php echo stripslashes( $ad ); ?>
 </div>
 <?php } ?>
 
 <main id="recent-content-1" class="site-main content-loop" role="main">
 
 <h3 class="section-title"><?php _e( 'News', 'gomedia' ); ?></h3>
 
 <?php $latest = get_posts( array( 'posts_per_page' => 3 ) ); ?>
 
 <?php if ( $latest ) : ?>
 <?php $i = 0; ?>
 <?php foreach ( $latest as $post ) : setup_postdata( $post ); ?>
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php if ( ++$i == 3 ) { echo 'style="border-bottom: none;"'; } ?>>
 
 <?php if ( has_post_thumbnail() ) : ?>
 <a class="hidden-xs" href="<?php the_permalink(); ?>" rel="bookmark">
 <div class="entry-thumb-wrapper">
 <?php the_post_thumbnail( 'gomedia-post-thumb', array( 'class' => 'entry-thumb', 'alt' => esc_attr( get_the_title() ) ) ); ?>
 <?php echo gomedia_get_post_format_icons(); // get the post format icons. ?>
 </div><!-- .entry-thumb-wrapper -->
 </a>
 <?php endif; ?>
 
 <header class="entry-header">
 <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
 
 <div class="entry-meta">
 <?php gomedia_posted_on(); ?>
 </div><!-- .entry-meta -->
 </header><!-- .entry-header -->
 
 <div class="entry-excerpt">
 <?php the_excerpt(); ?>
 </div><!-- .entry-excerpt -->
 
 </article><!-- #post-## -->
 
 <?php endforeach; ?>
 <?php endif; wp_reset_postdata(); ?>
 
 </main><!-- .site-main -->
 </div><!-- #content -->
 
 <?php get_sidebar( 'home-top' ); // Loads the sidebar-home-top.php templates. ?>
 
 </div><!-- .row -->
 </div><!-- .container -->
 
 <?php if ( of_get_option( 'gomedia_latest_videos', '1' ) ) { ?>
 <div id="carousel-1" class="carousel-loop">
 <div class="container">
 
 <?php
 $limit = (int) of_get_option( 'gomedia_latest_videos_num', 10 );
 $args = array(
 'tax_query' => array(
 array(
 'taxonomy' => 'post_format',
 'field'    => 'slug',
 'terms'    => array( 'post-format-video' )
 )
 ),
 'posts_per_page' => $limit
 );
 
 $video = get_posts( $args );
 ?>
 
 <?php if ( $video ) : ?>
 
 <h2 class="section-title"><?php _e( 'Latest Videos', 'gomedia' ); ?></h2>
 
 <div class="jcarousel jcarousel-carousel">
 <ul>
 <?php foreach ( $video as $post ) : setup_postdata( $post ); ?>
 <li>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <?php if ( has_post_thumbnail() ) : ?>
 <a href="<?php the_permalink(); ?>" rel="bookmark">
 <?php the_post_thumbnail( 'gomedia-carousel-thumb', array( 'class' => 'entry-thumb', 'alt' => esc_attr( get_the_title() ) ) ); ?>
 <h2 class="entry-title"><?php echo wp_trim_words( get_the_title(), 8 ); ?></h2>
 <span class="icon-mark"><i class="fa fa-play"></i></span>
 </a>
 <?php endif; ?>
 </article>
 </li>
 <?php endforeach; ?>
 </ul>
 </div><!-- .jcarousel -->
 
 <?php if ( count( $video ) > 6 ) { ?>
 <a href="#" class="jcarousel-control-prev"><i class="fa fa-chevron-left"></i></a>
 <a href="#" class="jcarousel-control-next"><i class="fa fa-chevron-right"></i></a>
 <?php } ?>
 
 <?php endif; wp_reset_postdata(); ?>
 
 </div><!-- .container -->
 </div><!-- .carousel-loop -->
 <?php } ?>
 
 <div class="container">
 <div class="row">
 
 <div id="content-2" class="col-md-9 clearfix">
 <main id="recent-content-2" class="content-loop">
 
 <?php $latest2 = get_posts( array( 'posts_per_page' => 3, 'offset' => 3 ) ); ?>
 
 <?php if ( $latest2 ) : ?>
 <?php foreach ( $latest2 as $post ) : setup_postdata( $post ); ?>
 
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
 <?php if ( has_post_thumbnail() ) : ?>
 <a class="hidden-xs" href="<?php the_permalink(); ?>" rel="bookmark">
 <div class="entry-thumb-wrapper">
 <?php the_post_thumbnail( 'gomedia-post-thumb', array( 'class' => 'entry-thumb', 'alt' => esc_attr( get_the_title() ) ) ); ?>
 <?php echo gomedia_get_post_format_icons(); // get the post format icons. ?>
 </div><!-- .entry-thumb-wrapper -->
 </a>
 <?php endif; ?>
 
 <header class="entry-header">
 <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
 
 <div class="entry-meta">
 <?php gomedia_posted_on(); ?>
 </div><!-- .entry-meta -->
 </header><!-- .entry-header -->
 
 <div class="entry-excerpt">
 <?php the_excerpt(); ?>
 </div><!-- .entry-excerpt -->
 
 </article><!-- #post-## -->
 
 <?php endforeach; ?>
 
 <?php gomedia_next_posts_link(); // Get the page/1/ link. ?>
 
 <?php endif; wp_reset_postdata(); ?>
 
 </main><!-- .site-main -->
 </div><!-- #content -->
 
 <?php get_sidebar( 'home-bottom' ); // Loads the sidebar-home-top.php templates. ?>
 
 </div><!-- .row -->
 </div><!-- .container -->
 
 <?php if ( of_get_option( 'gomedia_editor_picks', '1' ) ) { ?>
 <div id="carousel-2" class="carousel-loop">
 <div class="container">
 <h2 class="section-title"><?php _e( 'Editor\'s Picks', 'gomedia' ); ?></h2>
 
 <?php $editor_num = (int) of_get_option( 'gomedia_editor_picks_num', 10 ); ?>
 <?php $editor_tag = of_get_option( 'gomedia_editor_picks_tag' ); ?>
 
 <?php $picks = get_posts( array( 'posts_per_page' => $editor_num, 'tag_id' => $editor_tag ) ); ?>
 
 <?php if ( $editor_tag && $picks ) : ?>
 
 <div class="jcarousel jcarousel-carousel">
 <ul>
 <?php foreach ( $picks as $post ) : setup_postdata( $post ); ?>
 <li>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <?php if ( has_post_thumbnail() ) : ?>
 <a href="<?php the_permalink(); ?>" rel="bookmark">
 <?php the_post_thumbnail( 'gomedia-carousel-thumb', array( 'class' => 'entry-thumb', 'alt' => esc_attr( get_the_title() ) ) ); ?>
 <h2 class="entry-title"><?php echo wp_trim_words( get_the_title(), 8 ); ?></h2>
 <?php echo gomedia_get_post_format_icons(); // get the post format icons. ?>
 </a>
 <?php endif; ?>
 </article>
 </li>
 <?php endforeach; ?>
 </ul>
 </div><!-- .jcarousel -->
 
 <?php if ( count( $picks ) > 6 ) { ?>
 <a href="#" class="jcarousel-control-prev"><i class="fa fa-chevron-left"></i></a>
 <a href="#" class="jcarousel-control-next"><i class="fa fa-chevron-right"></i></a>
 <?php } ?>
 
 <?php endif; wp_reset_postdata(); ?>
 
 </div><!-- .container -->
 </div><!-- .carousel-loop -->
 <?php } ?>
 
<?php get_footer(); ?>

Vậy là chúng ta đã kết thúc một bài dài về Hướng dẫn Theme GoMedia WordPress toàn tập

The post Hướng dẫn Theme GoMedia WordPress toàn tập appeared first on Blog Wordpress.



from WordPress http://ift.tt/2auKSWu
via IFTTT

Không có nhận xét nào:

Đăng nhận xét