WordPress導入の手順~中編その2~

世間はお盆休みですが、尚更外に出にくくなって家でコーディングしてる気がします。。それにしても今日も暑い!

後編としてテーマの変更やカスタマイズをまとめようと思ってるのですが、それより先に記事作成機能のカスタマイズをやったので、それを中編としてまたまとめます。

今回目指したカスタマイズ
基本の文字装飾以外を記事に適用できるようにし、それを記事作成中ビジュアルエディターでも表示できるようにする。

 

上記を実現する為に、具体的に必要だった作業

  1. WordPressがどこにインストールされたのかを探す
  2. 使用中のテーマの「子テーマ」を作成してFTPでアップロードする
  3. 自分の使いたい記事装飾用CSSを登録する
  4. ビジュアルエディターでの表示形式を変えるCSSファイルを作ってFTPでアップロードする

こうして見ると簡単なのですが、1番で死ぬほど詰まりました!

各項目の手順をまとめていきたいと思います。

1.WordPressはどこにインストールされてるのか!?

スターサーバーの「簡単インストール」を使って本当に簡単に導入したは良かったのですが、テーマのカスタマイズのためにWordPressのデータベースに新しいフォルダを加えるという手順を見た時に、WordPress…どこにインストールされてるの!?という問題が発生してしまいました。

FTPで繋げられたスターサーバーのフリードメインの中身を見てもないない…

スターサーバーのマニュアルを見てもないない…

これは無理なんじゃないか…とめげそうになった時、パソコンの大先生が発見してくれました。

結論を言うと、スターサーバーの管理画面にWebFTP機能が付いていてそこでフォルダを作ったりファイルをアップロードしたりが簡単にできます。
(でも入口が簡単じゃない!てかマニュアルにもちゃんと分かりやすく書いて😭)

WebFTPの入口ですが、
サーバー管理画面→FTPアカウント設定(WPをダウンロードしているドメインを選択)→WebFTPの欄のログインをクリック
からログインできます。分かりにくくないすか!?!
使い方はインストール時と同じく分かりやすいです、一つ一つファイルをあげなきゃいけないので少し面倒ですが。

ちなみにFTPの方ですが、普通にWPをインストールした方のドメインに繋げば、WPのデータベースに繋がることができました。
ただ、以前繋げられなかったのはFTPのパスワードが不明だったためなのですが、これも先ほどのFTPアカウント設定でメニュー→編集というちっちゃいボタンを押すと、いつでも好きなパスワードが設定できます。前のパスワードを知らなくても変更できる形式です。
これでファイルをちまちま上げずに済みますね!ありがとうパソコンの大先生!

2.「子テーマ」を作ってテーマのCSSファイルを修正する

今このブログは初期設定にあるテーマの「twentyseventeen」を使用しているのですが、子テーマとは要するにこのテーマのHTML内にある基本のstyle.cssなど設定ファイルへのリンクの後に、自分が指定したいセレクタだけを記入したstyle.cssなどの機能追加ファイルを読み込んで大元を編集せず安全にあれこれ弄っちゃおうというシステムのことだと解釈しています。

普通のコーディング時に、リセットCSSとかノーマライズCSSの後にstyle.cssを読み込んで必要な部分だけプロパティを上書きしていくのと同じですね。

子テーマの作り方は他サイトで詳しく解説してあるので、記述は省略します。
参考:WordPressにおける子テーマの作り方

FTPが使えない時に分かったんですが、子テーマを登録するだけなら
外観→テーマ画面内の「新規追加」を選択→「テーマのアップロード」からzip形式で追加ができます。

3.新規の記事装飾用CSSの登録する

子テーマが出来たら「テーマの編集」からstyle.cssに自分で好きなcssを指定してみます。これがやりたかった!

参考サイト:WordPressでプロ級の投稿!初心者向け投稿マニュアル

前のエントリーでも引用しましたが、とりあえず最初に上記サイトで紹介されていた下3つを登録しました。

黄色マーカー

説明ボックスタイトル
説明ボックス内容

 

ちなみにこの2つは自分で作ってみました〜✌︎

ダブルボックスアイコン→作り方はこちら
左右にボックスアイコン

 

方法は引用したサイトに詳しいですが、基本的に

  1. クラス名を付けてstyle.cssにプロパティを書き込む
  2. プラグイン「AddQuicktag」にHTMLタグを登録する

この2ステップをこなせば、あとは記事作成画面で範囲を選んでAddQuicktagのタブから使いたい装飾を選べばHTMLタグが挿入されて装飾が完了します。

4.ビジュアルエディタで記事作成中も装飾を表示する

3で一応記事に反映はOKなのですが、その装飾は記事画面には表示されず、プレビューしないと実際どんな感じになるか分かりにくいという問題があります。

ですがそれはテーマの編集にビジュアルエディター表示用のstyle.cssを追加することで解決できます。

それも基本的に先ほどの参考サイトの通りに作れば良いのですが、1つ記述がなくて私が詰まったところがあります。
それはfunctions.phpの記述!

phpを少しでも知っている人には特に問題のない点なのだと思いますが、phpは
<?php

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_editor_style("editor-style.css");

こちらが正しい記述です。

<?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_editor_style("editor-style.css");

?>

 

それと、見ての通りeditor-style.cssを読み込むための記述は

add_editor_style(“editor-style.css”);

を使用しています。サイトの通りのを入れると「admin_init」のところで引っかかってエラーが出てしまうのですが、他のサイトで使っていたこれを使えば解決です!

ちなみにstyle.cssに記述したセレクタ はeditor-style.cssの方にもコピーして内容を一緒にする作業を忘れないようにしましょう。


ドロヘドロを読み始めました。林田先生・・・シロマサとか、お好きですか?
私は大好きです、好きなので林田先生の絵も好きですね。。
キャラの絶妙なテンションとか、表情とか、久々に正統派私の好きな漫画って感じのあれです。まぁずっと知ってたんですけど・・・早く読んどけよカスって感じですね。
心先輩カッコいい、カッコいいなぁ・・・
また1つ続きが楽しみな漫画が増えました。嬉しいなぁ。

コメントを残す

メールアドレスが公開されることはありません。