Present the France Trip

トレンドニュースや炎上、考察、面白いアプリやグッズなどを紹介

wordpressで誰にも見られずカスタマイズ

   

047

前回バックアップの方法をまとめたので、今回はカスタマイズ方法について記事を書いていきます。

例によって参考にしているサイトは

WordPressテーマカスタマイズに便利な「Theme Test Drive」の使い方

http://naifix.com/theme-test-drive/

(参考になりすぎてなぞってるだけ)ですが合わせて読んでくださいな。こちらはその分画像多めに行きます。

それじゃあ行ってみましょう!

バックアップは準備OKでしょうか

いろんなテーマを入れていじくり回したくなりますが、現行のブログをリアルタイムでいじっていたら訪問客は驚くし表示は崩れるしでイイ事無いです。

このサイトもスマホサイトが何故かwordpressオリジナルのださいテーマのままで、子テーマのカスタム版がうまく反映されてないです。なんでだ・・・・。誰か解決方法があったら教えて下さい。いっそリセットしたらすっきりするんでしょうか。

まあそれはさておきプラグをインストールしていきましょう

Theme Test Drive

Theme Test Drive をインストールします。

プラグインから検索して追加しましょう

SnapCrab_NoName_2015-5-15_15-11-43_No-00

インストール&実行です。

すると外観に

SnapCrab_プラグイン ‹ Present the France trip — WordPress - Mozilla Firefox_2015-5-15_15-16-12_No-00

というのが出てくるので、クリック

SnapCrab_NoName_2015-5-15_15-25-13_No-00

上は改造したいテーマ。下はアクセスレベルという閲覧設定です。

自分一人だけ見ることが出来て管理したいならレベル10でOK

SnapCrab_NoName_2015-5-15_15-38-38_No-00

右のEnableTheme Driveをクリックで完了です。

現テーマのカスタムにはテーマの複製を

今ある現行のブログデザインを改造してカスタマイズしたいというのもあると思います。

スポンサーリンク

そんな時はテーマの複製をします。前回、バックアップ方法でFTPの設定をしましたが、またそのソフトを使って現行テーマを保存します。

FTPのソフトに (エックスサーバーなら)ドメイン名/public_html/wp-content/themes を入れてエンター

SnapCrab_NoName_2015-5-16_17-16-30_No-00

こんなかんじに入れたテーマが出てきます。

私は無節操なので、いろんなテーマ入れ変えて遊んでますが、基本的にはstinger3のCANDYCRAZYです。基本的には。

ここで現行のファイルを保存しましょう。

そしてフォルダ名を変更して、別途保存しておきます。

SnapCrab_NoName_2015-5-18_11-4-38_No-00

こんなかんじに。

CSSを書き換える。

名前を書き換えてしまったので、中身のCSSもいじらならきゃいけません。

style.cssの

Theme Name: stinger3ver20140327
Theme URI: http://stinger3.com
Description: stinger3
Author: enji
Author URI: http://stinger3.com
License:
License URI:
Version: 20140327

のTheme Nameを書き換えて

Theme Name: stinger3_sp1
Theme URI: http://stinger3.com
Description: stinger3
Author: enji
Author URI: http://stinger3.com
License:
License URI:
Version: 20140327

子テーマのcandycrazyのstyle.cssも書き換えて、

Theme Name: candycrazy
Template: stinger3_sp1
Description: Customize css for stinger3
Auther: Qtaro
Author URI: http://room9.jp
License:
License URI:
Version: 20140327 (for stinger3ver20140327)
———————————————————*/
@charset “UTF-8”;
@import url(“../stinger3_sp1/style.css”);

こんなかんじでいいでしょう

そして出来たものをアップロードします。(ダウンロードと同じ手順で)

アップロードが完了したらwordpress画面から確認してみましょう

SnapCrab_NoName_2015-5-18_11-20-17_No-00 SnapCrab_NoName_2015-5-18_11-20-6_No-00

こんなかんじに名前変更版が出ます。

test driveの画面にもちゃんと反映されています。

コレで裏でいじりつつ表は普通に運営していけるというわけです。

SnapCrab_Theme Test Drive Options ‹ Present the France trip — WordPress - Mozilla Firefox_2015-5-18_11-23-30_No-00

cssをがっつり改造して自分だけのサイトを作っていきましょう!

        

ad

ad

  関連記事

SnapCrab_Jetpack ‹ Present the France Trip — WordPress - Mozilla Firefox_2015-5-19_11-59-9_No-00
Jetpackプラグインエラー

スポンサーリンク wordpressをリセットから復旧まで前回、wordpres …

screenshot
stinger3 子テーマ CANDY CRAZYの導入&カスタム方法

スポンサーリンク 前回stinger3をwordpressに適用させる。でsti …

images
名前.comで独自ドメインの取得方法

お名前.com スポンサーリンク ドメインの取得 前回サーバー編でサーバー契約を …

2932ddcb24620b0657f6f479eb5558ed_s
【ブラックリスト】WordPressコメント欄NGワード設定方法【スパム対策】

スポンサーリンク なんか最近スパムコメントが多いので、スパム対策でNGワード設定 …

screenshot
【wordpress】CANDY CRAZY カスタマイズ!テクニックまとめ【stinger3】

大分サイトを改装したので、まとめてみました。あと、これからやりたいことも後で見返 …

images
wordpress 簡単バックアップ方法【画像たっぷり】

stinger3 子テーマ CANDY CRAZYの導入&カスタム方法 スポンサ …