WordPress

【超絶初心者】Page Builder by SiteOriginでトップページを作成する

サイト制作をしていく中で、レイアウトを変えたいと思ったことはありませんか?

WordPressを立ち上げて少したった頃…

自分のトップページが大変なことになっている事に気がつきました。

全ての記事が一覧になっていたんですよね。

記事タイトル一覧ではなく。

記事の一覧。

ツラツラと記事が新着順に並んでいるんです。

トップページなのになんて見にくいんだ!!!

え?何これ?こんなものなの…??

と調べてみた所、使用しているテーマのXeory Baseはデザインも機能もシンプルで、カスタマイズ前提の為トップページも実にシンプル…というかテンプレート的なものは設定がない。。。

自分でカスタムして作ってね!!という事の様です…

なのでトップページをもっと見やすくする為にカスタマイズする事にしました。

使い方など、忘れないうちに備忘録として残しておきたいと思います。

プラグインでトップページを作成する

トップページをカスタマイズすると言っても、既にある記事一覧のトップページに手を加えるのではなく、新規の固定ページを作成し、をれをトップページとして表示させます。

トップページの作成には、「Page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」の2つのプラグインを使用しました。

プラグインをインストールして有効化する

・Page Builder by SiteOrigin

ウィジェット(パーツ)を組み合わせて、ページのデザインを作成するプラグイン

・SiteOrigin Widgets Bundle

Page Builder by SiteOriginだけでは使えるウィジェットが限定されている為、その他の高度なウィジェットを追加して使うことができるプラグイン

2つのプラグインを併用するのがオススメです。

インストールして有効化しましょう。

プラグインの設定

有効化が完了すると、ダッシュボードの「設定」内に「ページビルダー」、「プラグイン」内に「SiteOrigin Widgets」という項目が追加され、クリックすると設定画面になります。

ページビルダーの設定は、そのままで問題ありません。

SiteOrigin Widgetsの設定では、使用したいウィジェットを「Active」にします。

 

ページの作成

今回は固定ページでトップページを作成するので、ダッシュボードの「固定ページ」→「新規追加」から作成していきます。

ページビルダータブに切り替える

プラグインの有効化が完了すると、投稿や固定ページの入力画面に「ページビルダー」タブが追加されています。

「ページビルダー」タブをクリックし、入力画面を切り替えます。

列を追加する

ページのデザインを列ごとに追加します。

「列を追加」をクリックすると、列の作成画面になります。

例えば、その列を3つに区切りたい場合は3カラムと入力し、「設定」→「挿入」をクリックします。

そうするとこの様な3つの枠に分かれた列が挿入されます。

3カラムの列、2カラムの列、1カラムの列をそれぞれ追加してみました。

スパナのアイコンでそれぞれの列を編集、複製、削除ができ、その隣のアイコンで列の上下移動が可能です。

好きなウィジェットを追加する

【新着記事一覧を表示する】

1カラムの列を挿入します。

ウィジェットを配置する枠をクリックすると、濃い青色に選択されます。

それから「ウィジェットを追加」をクリックします。

出てきたウィジェット一覧の中の「SiteOrigin Post Carousel」が新着記事一覧のウィジェットです。

それを選択して配置します。

これで新着記事一覧が設置されました。

プレビューにて確認してみてください。

ウィジェットにカーソルを合わせると右上に編集、重複、削除のメニューが表示されます。

【カテゴリー別新着記事一覧を表示する】

ウィジェットを追加するところから説明します。

「Newpost Catch」を選択します。

ウィジェットが挿入されたら、「編集」を選択します。

タイトル:カテゴリー別記事一覧のタイトル、カテゴリー名などを記入

サムネイルの設定:挿入画像のサイズの設定

投稿件数:表示したい記事の件数

特定のカテゴリーを指定して表示:IDを入力

IDは、カテゴリー別のIDを調べます。下記に記載しています。

全て記載したら「終了」を選択します。

これでカテゴリー別新着記事一覧が設置されました。

ーーーーーーーーーーーーIDの調べ方ーーーーーーーーーーーー

ダッシュボード→「投稿」→「カテゴリー」を選択します。

カテゴリーの編集画面を表示させます。

その画面URLの真ん中ほどに、「ID=◯」と記載されています。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

 

ページを公開する

ページが出来上がったら、分かりやすいタイトルを付けて保存し、公開しましょう。

今回は固定ページタイトルをHOMEとしました。

作成したページをトップページに設定する

ダッシュボードの「設定」→「表示設定」を開きます。

「固定ページ」にチェック→「ホームページ」で作成したページタイトル(ここではHOMEとしています)を選択→「変更を保存」をクリックで設定が完了です。

サイトのトップページで表示されているか確認してみてください!

まとめ

WordPressを立ち上げてふとした時に、トップページが見にくい!事に気がつく方は私だけではないはず。

「Page Builder by SiteOrigin」と「SiteOrigin Widgets Bundle」の2つのプラグインを使うだけで超絶初心者でも好みのトップページを作成することができます!

トップページが見にくいと気がついた時からのザワつき感が、これでようやくスッキリです!

簡単なので、トップページが気になり出したらカスタマイズしてみてはいかがでしょうか。

【超絶初心者】WordPressでフォントを変更する方法

WordPress運用の過程で、フォントを変えてみたいと思ったことはありませんか?

私は形から入るタイプで、WordPressを初めてすぐ、モチベーションを上げるためにフォントの変更に取り掛かりました。

初心者中の初心者、超絶初心者のうちに取り掛かったため、とても悪戦苦闘しました、、、

終わってみるとさほど難しい作業ではなかったものの、試行錯誤の上の仕上がりだったため、忘れないうちに備忘録として残しておきたいと思います。

フォント変更の環境

当サイトでのフォントの設定をもとに説明します。

以下設定環境です。参考になればと思います。

OS:Mac

テーマ:Xeory Base

使用フォント:あずきフォント

相互変換ソフト:WOFFコンバータ

FTPソフト:FileZilla

WordPressでフォントの変更方法

フォントを選んでダウンロードする

好みのフリーフォントを選び、ダウンロードします。

当サイトではあずきフォントを使用していて、その変更方法について説明しますが、基本的には他のフリーフォントを使用しても、設定の仕方は同じです。

デスクトップなど、自分の分かりやすい場所にダウンロードします。

Zipファイルでダウンロードされた場合は、解凍します。

ファイルがいくつかある場合、ダウンロードしやすいようにひとつにまとめて圧縮してある事があります。それをZipファイルと良い、ファイルを開くためには解凍する必要があります。

フォントの拡張子をwoff形式に変換する

ファイルを開くと、「azuki.ttf」というファイルがあります。

フォントの形式(拡張子)にはいくつか種類があり、ブラウザによって対応している形式が異なります。

ダウンロードした拡張子はttfとなっていますが、WordPressでフォントを使うためには、ttf形式からwoff形式に変換する必要があるため、WOFFコンバータを使います。

WOFFコンバータをダウンロードして、起動します。

起動するとこのような画面が表示されます。

変換前ファイル:デスクトップにダウンロードした「azuki.ttf」を指定します。

フォントをWOFFに変換する時:「EOTファイルを作成する」にチェックを入れた場合、サポートが終了している古いブラウザにも対応する事ができます(任意)。当サイトでは作成していません。

変換開始をクリックすると、「azuki.woff」というファイルが作成されます。

EOTファイルを作成した場合、「azuki.eot」ファイルも作成されます。

woffファイルをサーバーにアップロードする

FTPソフトを使ってファイルをアップロードします。

FTPソフトはFileZillaを使いました。

アップロード先はテーマのスタイルシート(style.css)ですが、親テーマに直接アップロードするのはリスクがあるので、子テーマにアップロードします。

子テーマを作成してない場合、直接親テーマにアップロードする事もできなくはないのですが、テーマのアップデート時に消えてしまう可能性があるので、ぜひ子テーマを設定することをお勧めします。子テーマについて詳しくまとめています。

 

 

FileZillaを起動するとこのような画面が表示されますので、ホスト名、ユーザー名、パスワードを入力してサーバーにログインします。

ログインすると、右側のリモートサイトの部分に、サーバー上にあるサイトのファイルが表示されます。

フォントを変更したいサイトのドメインを選択し、public_html>wp-content>themes>子テーマの中に「azuki.woff」ファイルをアップロードします。

左側のローカルサイトには自分のPC上のファイルが表示されています。

デスクトップにフォントをダウンロードしたので、ローカルサイト側のDesktop>ダウンロードしたフォントのファイル>azuki.woffを探し、右側のリモートサイトの子テーマの中にドラッグ&ドロップでアップロードが完了です。

EOTファイルを作成した場合は、こちらも一緒にアップロードします。

スタイルシート(style.css)にコードを記入する

WorsPressの管理画面から、外観>テーマエディターを開きます。

右上の「編集するテーマを選択」で子テーマを選択し、「テーマファイル」から「スタイルシート(style.css)」を選択し、下記のコードを記入します。

@font-face{
font-family:azuki;
src:url('azuki.woff')format('woff');
}

font-familyのあとの部分は任意でタイトルを設定します。今回は分かりやすくazukiとしました。

azuki.woffの部分には、サーバーにアップロードしたファイルの名前と一致する必要があります。


EOTファイルを作った場合は、3行目と4行目の間に行を追加し下記コードを入力します。

url("azuki.eot") format("eot");

記入できたら、ファイルを更新します。

フォントの変更の作業は以上で完了です。何度か再読み込みしてサイトに反映されているか確認してみてください。

フォントの変更は必要?

フォントは、サイトのデザインの一部であり、見た目からサイトのイメージに大きく影響します。

サイトの内容と、サイトのデザインやイメージが一致していると、読み手はその内容により関心を持つ事ができます。

テーマにもともと設定されているフォントでは物足りなさを感じたり、サイトイメージとの相違があった場合は、なかなか読みにくいものです。

そういった意味で、フォントは読み手へ与えるイメージに大きく関わっています。

また、Wordpressはカスタマイズ性が高く、自分で作り上げていくところに魅力があります。

ひとつひとつ自分好みに作り上げていく事で、愛着も湧きます。

しかし、私のように、超絶初心者の方が真っ先に触る部分ではないかもしれません。

何を隠そう、私はWordpress立ち上げて記事数もそこそこに、真っ先にフォントの変更に着手しました。

完全に形から入るタイプなんです!!!

その結果、、、cssってなんだ?子テーマって何???何このコード!!!はぁ、、、?泣。という結果に。

これが悪戦苦闘した原因です。

結果的にさほど難しくない作業だったにも関わらず、1から勉強しながら頭を抱えての作業だったので、設定完了するまでにものすごーーーーく時間と手間がかかりました。。。

よく挫折しなかったなぁ、、、と自分でも思います。

WordPressを始めたばかりの超絶初心者さんが最初に記事をとにかくひたすら書くべし!と言われるのは、挫折をしないため、、、という意味もあるのでしょう。

もちろん、記事を書かないことには何も始まらない事が前提ではあるのですが。

それでも私はモチベーションを上げるために最初にフォントの変更に取り掛かったんですけどね…

プラグインを使う方法もある

なかなかフォントの設定がうまくいかなかったり難しいと感じる様なら、プラグインのEasy Google Fontsを使うのもお勧めです。

GoogleのWebフォントを無料で使えるプラグインです。

色やサイズなどの細かい設定も簡単にできるので、挫折することはないでしょう。

まとめ

フォントをサイトのイメージに合わせることで、読み手が読みたいと思えるように興味を引きつける事ができます。

さほど難しい作業ではないので、ぜひフォントはサイトイメージに合わせて設定することをお勧めします!

私のような超絶初心者さんでも分かりやすいように説明してみましたが、、、心が折れてしまっては本末転倒なので、挫折しない程度に余裕を持って取り掛かってみてください。

自分好みに作り上げて反映された時は、とても嬉しいものです!

 

【超絶初心者】WordPressで子テーマを作ろう!

え?子テーマ?

それってなんですのん??

私はWordPressを始めた時は超絶初心者で、右も左も分からず始めました。

なので、もちろん初めて子テーマと聞いても???がいっぱいでした。

このブログのテーマはXeory Baseです。

Xeory Baseはシンプルなデザインと機能で構成されています。

私はシンプルな見た目が好みでテーマに使用しましたが、、、機能も本当にシンプル!!!

なのでカスタマイズ必須です。

しかしカスタマイズする時に直接テーマを編集すると、テーマのアップデート時に全て上書きされてしまって、一所懸命編集したデータが消えてしまう、、、との事。

おっ…ソロシーーーーーーーイ!!!!!!

やっとの事で立ち上げて、頑張って作り上げたものが一瞬で消える…それは避けたい。

という事で、カスタマイズをする為に子テーマを設定したので、備忘録として設定手順を残しておきたいと思います。

子テーマとは??

子テーマを簡単に分かりやすく解釈すると、、、

当サイトの場合、メインテーマのXeory Baseを親テーマと呼びます。

子テーマとは、親テーマにカスタマイズしたい機能の追加編集を反映させるために別途作成したサブテーマ、といったイメージです。

と言われてもよく分からないですよね。

例えば、当サイトのカスタマイズのひとつに、「フォントの変更」があります。

フォントの変更の場合、スタイルシート(style.css)へのコードの追加が必要となります。

親テーマのスタイルシート(style.css)を直接編集することも可能なのですが、子テーマのスタイルシート(style.css)を作り、そこで追加編集をした方が、後々都合が良いのです。

子テーマでは、親テーマのスタイルシート(style.css)の情報をベースに、「親テーマのデザインとして組み込まれているフォントを使わずに、子テーマで指定したフォントを使用する」という指示を出す事で、親テーマを触らずに子テーマでの編集作業が可能になるのです。

子テーマを作る意味

ではなぜ子テーマを作った方が良いのでしょうか?

親テーマは触らないに越したことはない

まず、親テーマにはテーマのデザインや機能などの全ての情報が詰まっています。

万が一編集を間違ってしまったら…

超絶初心者は、もはやどこをどう修正したら良いのか分からず焦ります。おそらく何が原因なのか、どうしてそうなったのかも分からないのではないでしょうか。

そう、自分でコードを復旧させる事が困難なのです!

エラーが出たら、とりあえず一度元に戻して…としたいところですが、最悪の場合、画面真っ白事件に遭遇します。

そうなるとログインすらできなくなり、どうにも対処ができず最初から設定し直しとなります…

号泣モノです。。

親テーマは触らないに越したことはない。いや、触りたくない。(本音)

親テーマを直接編集せずにカスタマイズするためには子テーマが必須であり、万が一子テーマでエラーが出てしまっても、親テーマは健在なので最悪の事態を招くことはありません。

親テーマのアップデートの影響を受けない

直接親テーマに編集をすると、テーマのアップデート時に全ての編集が消えてしまう可能性があります。

アップデートではファイルが全て新しく更新されてしまいます。

そう、編集したファイルも全て上書きされてしまうのです!

一所懸命自分好みにサイトを作り上げても、アップデートで一瞬にして消えてしまったら…

絶望ですよね…

それを防ぐために子テーマを作成して、そこで編集作業をするのです。

親テーマと子テーマは別物です。

そのため親テーマがアップデートされて内容が変更されようとも、子テーマでの編集が消えることはなく、安心安全なのです。

子テーマを作ろう

作成環境

当サイトでの子テーマの作成環境です。

OS:Mac

テーマ:Xeory Base

テキストエディタ:Sublime Text

FTPソフト:FileZilla

サーバー:Xserver

テキストエディタとは、テキストファイルを編集できるソフトです。HTMLファイルやCSSファイル、PHPファイルなどプログラミング言語が書かれたファイルを開いて編集したりすることができます。

FTPソフトとは、サーバーとファイルをやり取りするためのソフトです。サーバー上にファイルをアップロードやダウンロードする時にFTPソフトを使います。
どちらもフリーでインストールできます。

① デスクトップに『xeory_base-child』の空のフォルダを作る

デスクトップ>ファイル>新規フォルダを作成し、タイトルを『xeory_base-child』に変更します。

 

 

② ①のフォルダ内にstyle.cssのファイルを作る

Sublime Textを開き、下のコードを入力して、タイトルをstyle.cssと入力して①のフォルダ内に保存します。

/*
Template:xeory_base
Theme Name:xeory_base-child
*/

 

③ ①のフォルダ内にfunctions.phpのファイルを作る

②と同じ流れでファイルを作成します。

下のコードを入力し、タイトル名をfunctions.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' );
}

 

④ 『xeory_base-child』のフォルダをサーバーにアップロードする

フォルダをアップロードするにはFTPソフトのFileZillaを使います。

まずFileZillaを開きます。

 

左のローカルサイトの部分には、自分のパソコンのファイル等が表示されています。

右のリモートサイトの部分には、サーバーのファイル等が表示される部分です。

FileZillaでサーバーにアクセスします。

ホスト名にFTPホスト名(FTPサーバー名)、ユーザ名にFTPユーザー名(FTPアカウント名)、パスワードにFTPパスワードを入力してサーバーに接続します。

接続に必要なFTPホスト名(FTPサーバー名)、FTPユーザー名(FTPアカウント名)、FTPパスワードはサーバー契約時にメールにて送られてきていると思います。

接続すると、右側のリモートサイトの部分に、サーバー上のフォルダが表示されます。

自分のサイト>wp-content>themesと開きます。

左側のローカルサイトからDesktop>xeory_base-childを探し、ドラッグ&ドロップで左側のリモートサイト部分のthemes内にアップロードします。

⑤子テーマを有効化する

WordPressの管理画面から、外観 > テーマを選択し、xeory_base-childを有効化することで、無事に子テーマ作成終了です。

 

 

 

header.phpのファイルを作る

子テーマの作成に最低限必要なファイルは、style.cssとfunctions.phpですが、今後Google Adsenseを考えている方は、header.phpのファイルも作成しておくことをお勧めします。

自身のサイトをAdsenseにリンクさせる時に、コードをheader.phpに組み込む場面があります。

もちろん、こちらも親テーマに直接編集を加えるとアップデート時に消えてしまうので、子テーマをに組み込む事をお勧めします。

header.phpの場合は、FTPソフトで親テーマのheader.phpファイルをリモートサイトからローカルサイトにダウンロードし、それを子テーマのファイル内にアップロードさせることで作成する事ができます。

①FileZillaを開き、サーバーに接続します。

②右側のリモートサイト内のXeory Base>header.phpをドラッグ&ドロップで左側のローカルサイトにダウンロードします。(一時的にダウンロードさせるだけなので、Desktopなど自分の分かりやすい所でOKです。)

③ダウンロードしたheader.phpを右側のリモートサイト内のxeory_base-child内にドラッグ&ドロップでアップロードします。

④WordPressの管理画面から、外観 > テーマエディターで、右上のテーマを選択でxeory_base-childを選択し、その下のテンプレート一覧にテーマヘッダー (header.php)とあれば完了です。

これで親テーマを触らずにheader.phpを編集する事が可能になりました。