WordPressにTwenty Fifteenの子テーマを作って適用してみた

WordPressにTwenty Fifteenの子テーマを適用してみました
以前はTwenty Elevenの子テーマをつくっていたので、今回も子テーマを用意します

普通にWordpressをアップデートしてけば、Twenty Fifteenがあるのでインストールは終わっています

以前は

WordPressにシェアボタンを用意する過程を公開 | bgbgbg
WordPressの子テーマ用にPHPを変更する | bgbgbg

な感じで用意したので、手順はほぼ同じです

子テーマ – WordPress Codex 日本語版
を見ながら、子テーマを用意します

WordPressのインストールディレクトリへ移動して

mkdir wp-content/themes/twentyfifteen-child
touch wp-content/themes/twentyfifteen-child/style.css
touch wp-content/themes/twentyfifteen-child/function.php

style.cssの記載をします(最低限)

/*
Theme Name: Twenty Fifteen child
Template: twentyfifteen 
*/

cssはfunction.phpで読み込むようになりました

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}       

add_action( 'wp_enqueue_scripts', 'theme_enqueue_fontawesome' );
function theme_enqueue_fontawesome() {
    wp_enqueue_style( 'parent-style', '//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
}                      

そしたらボタンを画面に出すのに、今回はcontent.phpにしました
子テーマへコピー

cp wp-content/themes/twentyfifteen/content.php wp-content/themes/twentyfifteen-child/content.php

で追記

/* 省略 */
        <div class="entry-content">
                /* 省略 */

                <!-- refference: http://tsuchiyashutaro.com/archives/2992 -->
                <ul class="share_btn">
                <li>
                <a class="facebook_btn"
                href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
                <i class="fa fa-facebook social_icon"></i>share</a>
                </li>
                <li><a class="twitter_btn" href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
                <i class="fa fa-twitter social_icon"></i>tweet</a>
                </li>
                <li><a class="hatebu_btn" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-hatena social_icon"></i><span class="hatebu_chara">はてブ<span></a></li>
                </ul>
                <!-- refference end -->
        </div><!-- .entry-content -->
/* 省略 */

でできあがりです

WordPressでSyntaxHighlighter Evolvedを外して文書を一気に直す

このブログもWordpressを使っていますが
シンタックスハイライト(プログラムコードとかを綺麗に見せる)に

  • SyntaxHighlighter Evolved

というプラグインを使っていましたが、Markdown形式でかける

  • Jetpack by WordPress.com

のソース表示でいいか、と思ったのと、コードのタグとかがサニタイズ( < が &#060 にみたいに変換されたりするので外すことに

プラグインを外すと

[text]
 シンタックスハイライトしていた文章..
[/text]

[php]
 シンタックスハイライトしていたphpのコード..
[/php]

と文章に SyntaxHighlighter Evolved で使っていた、記号が出てしまいます

Jetpack by WordPress.comのMakdownは ``` で囲えばいいのですがこれは
preタグ+codeタグに変換されます
文章をMysqlでいっきに置換してみます

まず [text] とか出てる記事を見て ID を調べます

http://(wordpress address)/?p=611

とかの611がIDだったりします

ひとつ試しにIDを指定して置換

サーバー、mysqlにログイン

$ mysql -u (mysqluser) -p (wordpress database name)

表示した記事の文章を置換して [text] -> <pre><code> に変換

mysql> update wp_posts set post_content = replace(post_content, ‘[text]’, ‘<pre><code>’) where id = 611;
mysql> update wp_posts set post_content = replace(post_content, ‘[/text]’, ‘</code></pre>’) where id = 611;

記事確認
http://(wordpress address)/?p=611

無事きれいになってたら成功
where以降をとってしまえば、全記事に適用されます([text]がない記事には影響しない)

mysql> update wp_posts set post_content = replace(post_content, ‘[text]’, ‘<pre><code>’);
mysql> update wp_posts set post_content = replace(post_content, ‘[/text]’, ‘</code></pre>’);

どうように [php] も取ります

mysql> update wp_posts set post_content = replace(post_content, ‘[php]’, ‘<pre><code>’);
mysql> update wp_posts set post_content = replace(post_content, ‘[/php]’, ‘</code></pre>’);

ひとつプラグインが減ってすっきりしました

WordPressのアップデートをするときにFTPの設定を求められる

新しくwordpress 4.1.0 を入れてたので、プラグイン入れようとかアップデートしようとかしたら

wordpressupdate-ftp

FTPの設定が求められる..なんだこりゃ

ディレクトリの権限が足りないようでした
apacheユーザーが書き込めないとFTPになるみたいです
サーバーにログイン、

$ chwon -R apache wordpress

と言ったふうに、wordpressを入れたディレクトリへ実行すれば直りました

必要なディレクトリに書き込み権限を与えてもいいと思います
(どこに必要なのか調べてません..)

権限は

$ ls -al

drwxrwxr-x  6 apache apache  4096  2月 26 20:40 2015 .
drwxr-xr-x 29 user   apache  4096  2月 15 16:28 2015 ..
-rw-r--r--  1 apache apache   240  2月 15 16:29 2015 .gitignore
-rw-r--r--  1 apache apache   236  2月 15 16:49 2015 .htaccess
-rw-r--r--  1 apache apache   418  9月 25 09:18 2013 index.php
-rw-r--r--  1 apache apache 19930  2月 26 20:40 2015 license.txt
-rw-r--r--  1 apache apache  3204 12月 19 18:50 2014 readme-ja.html
-rw-r--r--  1 apache apache 10026  2月 26 20:40 2015 readme.html
-rw-r--r--  1 apache apache  4951  8月 21 02:30 2014 wp-activate.php
drwxrwxr-x  9 apache apache  4096 12月 19 18:49 2014 wp-admin
-rw-r--r--  1 apache apache   271  1月  9 02:01 2012 wp-blog-header.php
-rw-r--r--  1 apache apache  5008 11月 27 05:17 2014 wp-comments-post.php
-rw-r--r--  1 apache apache  3727 12月 19 18:50 2014 wp-config-sample.php
-rw-rw-rw-  1 apache apache  4009  2月 15 16:42 2015 wp-config.php
drwxrwxr-x  6 apache apache  4096  2月 26 20:42 2015 wp-content
-rw-r--r--  1 apache apache  2956  5月 13 13:39 2014 wp-cron.php
drwxrwxr-x 12 apache apache  4096 12月 19 18:49 2014 wp-includes
-rw-r--r--  1 apache apache  2380 10月 25 07:58 2013 wp-links-opml.php
-rw-r--r--  1 apache apache  2714  7月  8 01:42 2014 wp-load.php
-rw-r--r--  1 apache apache 33435 12月 17 07:19 2014 wp-login.php
-rw-r--r--  1 apache apache  8252  7月 17 18:12 2014 wp-mail.php
-rw-r--r--  1 apache apache 11115  7月 18 18:13 2014 wp-settings.php
-rw-r--r--  1 apache apache 25152 12月  1 06:23 2014 wp-signup.php
-rw-r--r--  1 apache apache  4035 12月  1 06:23 2014 wp-trackback.php
-rw-r--r--  1 apache apache  3032  2月 10 05:39 2014 xmlrpc.php

でみれて、rwxの順で、wが書き込みです
ユーザー、グループ、その他、でrwxと並んでいて、
次のapache apacheがユーザー、グループです
apacheユーザーでもいいし、apacheグループでもwをつければできます

WordPressでMarkdown記法を使う

WordPressでMarkdown記法が使いたかったので入れてみました

Jetpackのプラグインを使いました
Jetpackのインストールはこちらを参考に
WordPressプラグインのJetpackを入れてみた

管理者画面にログインして、左メニュー>Jetpack>設定、をクリック
Markdownを有効化します
jetpack-markdown

あとは普通に投稿するときにテキストビューでMarkdownが使えるようになります