Last Updated on 2015年4月17日 by kabekin
新ブログ用に Twenty Fourteenテーマの改造手順を メモっておきます。
参考にしたサイトは以下の通りです。ありがとうございます
http://hikikomori-channel.com/twentyforteen_sidemenu/
http://licoco.info/wordpress-twenty-fourteen-width-17.html
https://firegoby.jp/archives/2394
http://iinamotto.com/2014/01/1718.html
http://netaone.com/wp/wordpress-plugin-first/
http://wp-themetank.com/
http://ryus.co.jp/blog/twentyfourteenwidthwide/
http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E
作業手順
1) デフォルトでインストールされているTwenty Fourteenを使用して自分好みに改造
2) 改造済のテーマをFTPでローカルにダウンロードしWinMeargeで差分ファイル抽出
3) 子テーマ用にディレクトリ作成 twentyfourteen-child ←元のテーマ名に-childを追加
4) twentyfourteen-childの中にfunction.php と style.cssを入れる
style.cssはダウンロードした改造スタイルシートをそのまま入れる
●function.phpは指示通り新規UTF-8ファイルに下記を追加するのみ
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}●style.cssの先頭コメント部分を修正
/* Theme Name: Twenty Fourteen child Theme URI: http://asakita.net/kabekin/twenty-fourteen-child Author: the kabekin Author URI: http://asakita.net/kabekin Template: twentyfourteen Description: Twenty Fourteen child theme Version: 1.3 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready Text Domain: twenty-fourteen-child This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
この「Template: twentyfourteen」が親テーマの指定になるようで、
オリジナルのTwenty Fourteenテーマには無かったので追加が必要
twentyfourteen-childディレクトリを作りfunction.phpとstyle.cssを入れて、
wordpressのテーマ設定でTwenty Fourteen childを選べばTwenty Fourteenテーマをベースにした子テーマに移行完了
5) Style.css以外の変更点を反映
この時点でstyle.cssが既に改造品に入れ替わっているのでサイトのスタイルは反映されています。
サイトの出力スクリプトの反映は各phpファイルを更新する形でパッチするようで、
どうやら子テーマのディレクトリに同ファイル名で処理を更新したい関数を入れておけば該当の関数が上書きされるようです。
と、言う訳で今回は下記の関数をパッチします。
●function.phpに下記関数を追加
<?php
/*+++ Kabekin Add 20150410 子テーマ指定用 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/*+++ Kabekin Add 20150321 パスワード保護ページのタイトルに「保護中」を出さない */
add_filter('protected_title_format', 'remove_protected');
function remove_protected($title) {
return '%s';
}
/*+++ Kabekin Add 20150321 パスワード入力部の文言変更 */
function my_password_form() {
return
'<font color="#ff0000">※これ以降パスワードで公開範囲を限定しています。閲覧する場合はパスワードを入力して下さい。</font><br /><br />
<form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post">
<input name="post_password" type="password" size="24" />
<input type="submit" name="Submit" value="' . esc_attr__("パスワード送信") . '" />
</form><br />';
}
add_filter('the_password_form', 'my_password_form');
/*+++ Kabekin Add 20150323 コメント投稿欄の下にあるHTMLタグを非表示 */
add_filter("comment_form_defaults","my_special_comment_after");
function my_special_comment_after($args){
$args['comment_notes_after'] = '';
return $args;
}
/*+++ Kabekin Add 20150323 購読者はダッシュボードリンクを非表示 */
add_action( 'after_setup_theme', 'subscriber_hide_admin_bar' );
function subscriber_hide_admin_bar() {
$user = wp_get_current_user();
if ( isset( $user->data ) && !$user->has_cap( 'edit_posts' ) ) {
show_admin_bar( false );
}
}●fotter.phpをパッチ
<?php /** * The template for displaying the footer * * Contains footer content and the closing of the #main and #page div elements. * * @package WordPress * @subpackage Twenty_Fourteen * @since Twenty Fourteen 1.0 */ ?> </div><!-- #main --> <footer id="colophon" class="site-footer" role="contentinfo"> <?php get_sidebar( 'footer' ); ?> <div class="site-info"> <?php do_action( 'twentyfourteen_credits' ); ?> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyfourteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' ); ?></a> </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> <center>Copyright © - 2009-2015 - <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?> </a>All Rights Reserved.</center> </body> </html>
●custom-header.phpをタイトル画像の高さを120pxにパッチ
<?php /*+++ Kabekin Modify 20150331 ヘッダ画像の高さを120pxに変更 */ add_theme_support( 'custom-header', apply_filters( 'twentyfourteen_custom_header_args', array( 'default-text-color' => 'fff', 'width' => 1260, 'height' => 120, 'flex-height' => true, 'wp-head-callback' => 'twentyfourteen_header_style', 'admin-head-callback' => 'twentyfourteen_admin_header_style', 'admin-preview-callback' => 'twentyfourteen_admin_header_image', ) ) ); }
●content.phpでパスワード保護と非保護の両立できる記事を出力できるようにパッチ
<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php twentyfourteen_post_thumbnail(); ?>
<header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>
<div class="entry-meta">
<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
</div>
<?php
endif;
if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<h1 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h1>' );
endif;
?>
<div class="entry-meta">
<?php
if ( 'post' == get_post_type() )
twentyfourteen_posted_on();
if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) :
?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span>
<?php
endif;
edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<?php if ( is_search() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<!-- Kabekin Add 20150321 パスワード用前カスタムフィールド追加 -->
<?php
$field = get_field("pre_pass", $post->ID);
if($field != '') {
echo $field ;
} else {
echo '';
}
?>
<?php
/* translators: %s: Name of current post */
the_content( sprintf(
__( 'Continue reading %s <span class="meta-nav">→</span>', 'twentyfourteen' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) );
?>
</div><!-- .entry-content -->
<?php endif; ?>
<?php the_tags( '<footer class="entry-meta"><span class="tag-links">', '', '</span></footer>' ); ?>
</article><!-- #post-## -->
あと、メタ情報ウィジェットでゲストの管理画面を出さないようにパッチ
/**
* Meta widget class
*
* Displays log in/out, RSS feed links, etc.
*
* @since 2.8.0
*/
class WP_Widget_Meta extends WP_Widget {
public function __construct() {
$widget_ops = array('classname' => 'widget_meta', 'description' => __( "Login, RSS, & WordPress.org links.") );
parent::__construct('meta', __('Meta'), $widget_ops);
}
public function widget( $args, $instance ) {
/** This filter is documented in wp-includes/default-widgets.php */
$title = apply_filters( 'widget_title', empty($instance['title']) ? __( 'Meta' ) : $instance['title'], $instance, $this->id_base );
echo $args['before_widget'];
if ( $title ) {
echo $args['before_title'] . $title . $args['after_title'];
}
?>
<ul>
<!-- Kabekin Commentout 20150323 メタ情報からサイト管理を非表示に変更
<?php wp_register(); ?>
-->
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>"><?php _e('Entries <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<?php
/**
* Filter the "Powered by WordPress" text in the Meta widget.
*
* @since 3.6.0
*
* @param string $title_text Default title text for the WordPress.org link.
*/
echo apply_filters( 'widget_meta_poweredby', sprintf( '<li><a href="%s" title="%s">%s</a></li>',
esc_url( __( 'https://wordpress.org/' ) ),
esc_attr__( 'Powered by WordPress, state-of-the-art semantic personal publishing platform.' ),
_x( 'WordPress.org', 'meta widget link text' )
) );
wp_meta();
?>
</ul>
<?php
echo $args['after_widget'];
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
return $instance;
}
public function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
$title = strip_tags($instance['title']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
<?php
}
}6) 引用部で使用する画像を追加(子テーマで独自に使う画像はココに入れて使う)
twentyfourteen-child\images\ディレクトリを作成しFTPで画像をアップロード
postquote.png
7) 投稿エディタの横幅対策
twentyfourteen-child\css\ディレクトリを作成しFTPで画像をアップロード
editor-style.css
html .mceContentBody {
max-width: 840px;
}img {
max-width: 840px;
}.wp-caption {
max-width: 840px;
}とりあえずこんな感じでTwenty Fourteenを自分で使いたいデザイン&機能にカスタマイズできました。
まだまだ不具合が多いですがとりあえず使えています。
残りの残件をまとめて、詳しい方に相談しよう^^;;;