PC & スマホアプリの使い方なら

できるネットインプレスグループ創設25周年

  • Twitter をフォロー
  • Facebook ページをいいね
  • Google+ ページをフォロー
  • RSS フィードで購読
  • このサイトについて
サイト内検索

急上昇ワードiOS 10 メルカリ 神保町ペロリ旅

  • PC & スマホアプリの使い方なら | できるネット
  • サイト制作・運営
  • WordPress(ワードプレス)
  • WordPressのテーマを編集して独自のテーマを作る方法を知り、準備をする
  • WordPress(ワードプレス)
  • サイト制作・運営

WordPressのテーマを編集して独自のテーマを作る方法を知り、準備をする

17:11 2015年2月19日 公開

  • WordPress
  • テーマの編集
WordPressのテーマを編集して独自のテーマを作る方法を知り、準備をする

多機能で自由度の高いWordPressですが、既存のカスタマイズ項目やプラグインだけでは、やりたいことが実現できない場合もあります。テーマを編集して、ページを構成するHTMLやCSSのコードを書き換えましょう。

  • tweet
  • このエントリーをはてなブックマークに追加
  • pocket

ワザ70

テーマの編集で自由なカスタマイズを始めよう

管理画面の項目にはないカスタマイズも可能になる

多機能で自由度の高いWordPressですが、既存のカスタマイズ項目やプラグインだけでは、やりたいことが実現できない場合もあります。例えば「サイトのタイトルに会社のロゴ画像を使いたい」と思っても、Twenty Fourteenの通常のカスタマイズでは実現できません。

しかし、テーマを編集して、ページを構成するHTMLやCSSのコードを書き換えれば、タイトルにロゴ画像を使えます。それだけでなく、ほかの部分も自由に、イメージどおりに作ることが可能になります。テーマの編集は、サイト制作の自由度を大きく広げます。そして、WordPressの本当の自由度の高さを生かすこともできるのです。

ここでは、HTMLやCSSの知識がない人でも始められる、安全で確実性が高いテーマ編集の方法を、実際に作業しながら解説します。

なお、HTMLやCSSのコードは、WordPressの管理画面にある[テーマの編集]画面でも編集できますが、本書ではこの画面は使いません。ブラウザーだけでテーマの編集ができて手軽ですが、編集機能が貧弱なうえ、編集前のテーマのバックアップが残らないので、ミスしたときの修復も困難になるためです。

WordPressの[テーマ編集]画面を表示するには

WordPressの[テーマ編集]画面を表示するには

WordPressの[テーマ編集]画面を表示するには

最初にテキストエディターとファイル転送ソフトを用意する

 本書では次の2つをポイントに、テーマの編集を行います。

 ・高機能のテキストエディターで、快適に効率よく編集を行う

 ・テーマのバックアップを取り、すぐ元に戻せるようにする

1つ目は、作業効率の面だけでなく、コードの編集方法を覚えていく学習効率の面でも重要です。WordPressのテーマはHTML、PHP、CSSのコードが記述されたテキストファイルで構成されているため、高機能のテキストエディターを使うことで、編集の快適さが大きく向上します。

本書では「Sublime Text」(ワザ71参照)を使って解説を進めます。下の画面にあるように、HTMLなどのコードを色分け表示してわかりやすくでき、多彩な編集機能も持っています。WordPressの記事の編集画面で利用する「テキストエディター」とは異なり、パソコンにインストールして使うソフトウェアです。

 2つ目は、サイトをトラブルなく運営しながらテーマの編集を進めていくために必要なことです。本書では、ファイル転送ソフトの「FileZilla」(ワザ73参照)を使い、編集前にサーバーからテーマをダウンロードしてバックアップを取ります。

CMSはブラウザーだけでサイトを制作・運営できることが利点の1つです。しかし本書では、CMSの舞台裏にまで入り込む、ちょっと高度な作業を行います。そのためにブラウザー以外にも複数のソフトを使うことになりますが、以降の解説を読んで、適切に使いこなしていきましょう。詳しいテーマ編集の作業の手順は、ワザ74 ~ 77で解説します。

Tipsほかに使い慣れたソフトがあれば、それでもOK

ここではSublime TextとFileZillaを使って解説を進めますが、ほかに使い慣れたテキストエディターやファイル転送ソフトがあれば、そちらを使っても構いません。ただし、テキストエディターの性能は作業効率に大きく影響するので、「メモ帳」などシンプルな機能のものを使っている場合は、SublimeTextを試してみることをおすすめします。

本書でテーマの編集に利用する2本のソフトウェア

Sublime Text(テキストエディター)

Sublime Text(テキストエディター)

多くのプロのWeb制作者にも愛用されているテキストエディター。Windows/Mac対応。70ドルの有料ソフトだが、機能や期間の制限なしで試用できる。

FileZilla(ファイル転送ソフト)

FileZilla(ファイル転送ソフト)

シンプルなインターフェースで使いやすいファイル転送ソフト。Windows/Mac対応。無料。

【もっとWordPressの解説を読むには】
WordPressの解説記事まとめ(WordPress 4.x対応)

次の記事WordPressのテーマを編集するために高機能テキストエディター「Sublime Text」を使う

前の記事「TwiRobo」を利用して、指定した記事をTwitterで自動ツイートする

  • WordPress
  • テーマの編集
  • サイト制作・運営
  • WordPress(ワードプレス)
  • Twitterでシェア
  • Facebookでシェア
  • Lineで送る

この記事が気に入ったら
いいね!しよう

できるネットから最新の記事をお届けします。

著者プロフィール

ホシナカズキ

1979年生まれ。テレビ業界で番組制作に携わっていたが、YouTubeの登場に衝撃を受けてIT業界に転身。IMJなどを経てフリーランスのWebディレクターに。

フィーチャーフォン向けキャリア公式サイトの企画・構築・運用のディレクターを務めた経験からモバイル領域に強みを持ち、フィーチャーフォンからのノウハウを生かした、スマートフォンサイト制作やコンサルティングを得意とする。WordPress、Moveble TypeといったCMSを用いて、企業向けWebサイトやブログなどの制作全般、リプレイス、運用コンサルティングなどを手がける。

ほかにも執筆や他業種での企画立案、アドバイザリーなど、Webを中心に置きながらさまざまな方向で活動中。 著書に『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』(ワークスコーポレーション)、『Facebookページ プロフェッショナルガイド』『Facebookデザイン プロフェッショナルガイド』(共著:マイナビ)がある。

● 個人ブログメディア「[M] mbdb」(モバデビ)
http://mbdb.jp/

● ワークサイト「M-glam」
http://m-glam.net/

書籍で読みたい方はこちら

できる100ワザ WordPress 必ず集客できる実践・サイト運営術WordPress 4.x対応

ホシナカズキ&できるシリーズ編集部

定価:本体1,780円+税

インプレスの商品ページを見る

できる100ワザ WordPress 必ず集客できる実践・サイト運営術WordPress 4.x対応

Amazonで購入

楽天ブックスで購入

オススメの記事一覧
同じカテゴリーの記事一覧
  • 「エックスサーバー」とWordPressで常時SSLサイトを開設する
  • 常時SSLが無料! レンタルサーバー「エックスサーバー」でサイトを開設する
  • 作業効率が大幅向上! WordPress 4.5のさらに強化されたテーマカスタマイザー
  • WordPress 4.5の強化されたビジュアルエディタ(書式ショートカットとインラインリンク編集)
  • 必ず事前にバックアップを! WordPressを最新版(4.5)へ安全に更新する手順
カテゴリーで使い方を探す
カテゴリーで使い方を探す
  • トップページ
  • Apple/Mac/iOS
    • iPhone最近アップデートされたカテゴリー
    • Apple Music
    • Apple Watch
    • iPad
    • iPod touch
    • Apple TV
    • iMovie
    • iPhoto
    • Mac
    • iTunes
    • その他(Apple)
  • Windows/Office
    • Windows 10最近アップデートされたカテゴリー
    • Word
    • Excel最近アップデートされたカテゴリー
    • Excel関数最近アップデートされたカテゴリー
    • PowerPoint
    • Access最近アップデートされたカテゴリー
    • OneNote
    • OneDrive
    • Office
    • Windows 8.1/8
    • Windows 7
    • XPサポート終了
    • その他(Windows/Office)
  • サービス/ソフト
    • Minecraft(マインクラフト)最近新しい記事が追加されたカテゴリー
    • プログラミング
    • YouTube
    • Facebook
    • Instagram(インスタグラム)
    • Pokémon GO(ポケモンGO)
    • Amazon
    • LINE
    • giftel(ギフテル)
    • Spotify(スポティファイ)
    • Webサイト/Webサービス
    • 動画配信サービス
    • Dropbox
    • Evernote
    • ショートカットキー
    • note(note.mu)
    • PDF
    • GANREF
    • クラウド
    • Firefox
    • iKnow!
    • Rosetta Stone
    • RSSリーダー
    • Twitter
    • Ustream
    • 検索
    • サイボウズLive
    • セカンドライフ
    • 年賀状
    • はてなブックマーク
    • ブログパーツ
    • 今週の小ワザ
    • その他(サービス/ソフト)
  • Google
    • Android最近アップデートされたカテゴリー
    • Google Playミュージック
    • Googleフォト
    • Googleカレンダー
    • Chrome
    • Inbox by Gmail
    • Ingress(イングレス)
    • Gmail
    • Googleマップ
    • Googleドライブ
    • Google検索
    • その他(Google)
  • サイト制作・運営
    • Webマーケティング最近新しい記事が追加されたカテゴリー
    • ヒートマップツール
    • HTML
    • CSS
    • WordPress(ワードプレス)
    • Googleアナリティクス
    • Googleタグマネージャ
    • Google AdSense
  • デバイス
    • HOME ALSOK
    • ホームセキュリティ最近新しい記事が追加されたカテゴリー
    • スマートスピーカー
    • Amazon Echo
    • 子供GPS
    • まもるっく
    • 格安スマホ、格安SIM
    • GoPro
    • dynabook
    • Chromecast
    • USBメモリー
    • Touch Diamond
    • Pocket WiFi
    • BlackBerry
    • VAIO最近アップデートされたカテゴリー
    • ミニノートPC
    • その他(デバイス)
  • Android
    • GALAXY
    • LG(G2、Optimus)
    • MEDIAS
    • LifeTouch NOTE
    • Sony Tablet S
    • Androidアプリ・活用術
    • その他(Android)
  • 通信事業者
    • NTTドコモ
    • au
    • ソフトバンク
  • 読み物
    • マネー
    • マインドフルネス
    • 神保町ペロリ旅
    • 編集部からのお知らせ
    • できるもんの部屋
    • インタビュー
    • トピック
    • まとめ
    • その他(読み物)
人気記事
  1. Excel関数一覧 機能別
  2. 【知ってた?】スマホで「この画像と似た画像」を検索する方法(Google画像検索)
  3. Googleの軽くてかわいいアプリ「Files Go」でスマホのストレージとファイルを管理しよう【Androidアプリ】
  4. 【エクセル時短】今さら聞けない「VLOOKUP」。複雑な「4つの引数」を理解する
  5. 【Google裏ワザ】「斜め」「一回転」など、スマホで楽しめる検索隠し機能「5選」
Pick Up
  • 子どもGPS
  • POD個人出版アワード2018
  • できる楽器シリーズ
新着記事
  • PowerPointのSmartArtとは
  • これなら忘れない!? ホーム画面に勝手に出てくる「記憶ヘルパー」【Androidアプリ】
  • PowerPointで図形をグリッド線に合わせる方法
  • PowerPointでスライドにグリッド線を表示する方法
  • 【要チェック】GmailのInboxアプリ新機能「ハイライト」で、重要な新着メールだけを強調表示!

Twitterで @dekirunet をフォローする フォローする @dekirunet

ページ上部へ

Pick Up
  • 子どもGPS
  • POD個人出版アワード2018
  • できる楽器シリーズ
フォロー
  • RSSフィードで購読
  • Twitterでフォロー
  • Facebookでフォロー
できるシリーズ
  • できるシリーズについて
  • 読者限定PDFのダウンロード
  • サンプルファイルのダウンロード
できるネット
  • このサイトについて
  • 本サイトのご利用について
  • 全記事一覧
  • プライバシーについて
  • 会社概要
  • インプレスグループ
インプレスの本、雑誌と関連Webサービス
  • DOS/V POWER REPORT
  • GANREF
  • できるネット
  • 年賀状Web
  • Web徹底攻略
  • Reader's Forum
  • インプレス

Copyright © Impress Corporation. All rights reserved.