WordPress Sydney(シドニー) テーマのカスタマイズ・インストールからヘッダーエリアの設定まで(その1)
Contents
Sydney(シドニー)について
VM環境(Ubuntu Server 16.04LTS)上のWordPressに海外製のテーマSydney(無料版)をインストールしてみた時の備忘録。
Sydneyを選択した理由は五つ星が261個もついていたのと(2018年10月19日現在)Sydneyを勧める日本語の記事が結構あったので試してみたくなった事がある。
説明文にはざっくりと以下の様な事が書いてあった。
- 企業や個人事業主向けのパワフルなビジネステーマ
- カスタマイズが豊富
- エンゲージメントを高めるフロントページをすばやく作成できる
確かにヘッダーにスライダー(一定間隔で画像が切り替わる)や動画を指定できたり、細かい色の設定ができたりと無料版でもかなり色々なカスタマイズ(設定)が可能なのでビジネスに限らず個人のブログでも色々な設定を楽しみたい人には良いかも知れない。
ちなみにこのブログは(2018年10月19日現在)Huemanを使用しているのでSydneyではないが、Sydneyを試したい人の役に立つのであればと思い記事にしている。
インストール
WordPressのメニューから外観ー>テーマー>新しいテーマを追加ー>テーマを検索で”Sydney”を検索する。
マウスオーバーすると”インストール”ボタンが現れるのでクリックする。
インストールが完了したら”有効化”をクリックするとテーマが適用される。
子テーマの作成
style.cssを直接編集するとテーマがバージョンアップされた時に編集した内容が飛んでしまう事があるので子テーマを作成することにした。
子テーマの作成については以前にHestiaの子テーマを作成した時の記事を参照。
上記記事の「子テーマ用のディレクトリーの作成」~「所有者の変更」までを実行すると外観ー>テーマにSydneyの子テーマが表示されるので”有効化”をクリックする。
追加プラグインのインストール
Sydneyテーマをインストールしたら以下のプラグインのインストールを推奨されたのでとりあえず”プラグインのインストールを開始”でインストールする
Elementor | ドラッグ・アンド・ドロップでフロントページをデザインできるページビルダー |
Sydney Toolbox | Sydneyのフロントページをウィジェットでページデザインできるツール |
両方チェックをして”インストール”を選択して”適用”をクリック
インストールは完了したがまだ有効になっていないので”必須プラグインのインストール画面に戻る”をクリック。
2つのプラグインを選択してプルダウンから”有効化”を選択して”適用”をクリック。
WordPressのメニューにElementorが追加された。
尚、プラグインの使い方については別記事とする
有料版について
このブログではSydneyの無料版で試した事を書いているが有料版(59ドル~/年)は以下の機能が追加されている。
- フッタークレジット設定
- 拡張ウィジェット
- 拡張カスタマイズ
- WooCommerce 互換(ECサイト用プラグイン)
- 優先サポート
など。
ちなみに有料版の説明はこちら
カスタマイズ
この記事では”一般”から”ヘッダーエリア”までの記事とする。
ブログ設定以降はその2以降の記事とする。
一般
ページの上下の余白のサイズを指定する
サイトのタイトル、タグライン、ロゴ
サイトのタイトル | サイトのタイトル(下記のロゴとは同時に表示できない) |
キャッチフレーズ | キャッチフレーズ(下記のロゴとは同時に表示できない) |
ロゴをアップロード | ロゴをアップロードした時 |
サイトアイコン | サイトのアイコン(ファビコン) |
ヘッダーエリア
ヘッダーの種類
フロントページのヘッダー種類
トップページ(ホームページ)のヘッダー種類を以下の4パターンから選択する
全画面スライダー | トップページ(ホームページ)のヘッダーにスライダーを表示する ※スライダーとはカルーセルパネルの様に自動的に画像が切り替わる。後述のヘッダースライダーの設定にて最大5つまで画像を指定することができる またスクロール時にはメニューが表示されるが、トップまでスクロールするとメニューの背景色が透過色になりスライダーに指定した画像をメニューで遮らないように制御されている(見やすい!) 例) 第一スライド(デフォルトは4秒で次のスライドに切り替わる) 第二スライド 注意) ここで全画面スライダーを選択して後述のヘッダースライダーにてスライドを1枚も指定しないと下記の”ヘッダーなし(メニューのみ)”とほぼ同じ設定になる ”ほぼ”としたは”ヘッダーなし(メニューのみ)”の場合は常にメニューが表示されるが、こちらでは一番上にスクロールした時に自動的にメニューの背景色が透過色になるので、そこは異なる |
画像 | トップページ(ホームページ)に後述のヘッダーメディアで指定する画像が表示される |
動画 | トップページ(ホームページ)に後述のヘッダーメディアで指定する動画が表示される |
ヘッダーなし (メニューのみ) | トップページ(ホームページ)にスライダー、画像、動画などは表示されない 但しメニューは表示される |
サイトヘッダーの種類
トップページ(ホームページ)以外のサイトのヘッダー種類を以下の4パターンから選択する
全画面スライダー | 指定の仕方はフロントページのヘッダー種類の設定と同様 フロントページ”以外”に反映される |
画像 | 同上 |
動画 | 同上 |
ヘッダーなし (メニューのみ) | 同上 |
ヘッダースライダー
ヘッダーの種類でスライダーを指定した時のヘッダースライダーに関する設定を行う。
スライダーのスピード | ミリ秒単位でスライドする間隔を指定する デフォルトは4000(ミリ秒) | ||||
テキストをスライドさせない | チェックをすると第1スライドで指定したタイトルとサブタイトルが常に表示される チェックを外してスライド毎に異なるタイトルとサブタイトルを表示させることも可能 | ||||
第1~5スライドの画像 | 画像の選択、変更、削除が可能 | ||||
第1~5スライドのタイトル | スライド毎にタイトルの設定が可能 第2スライド以降は”テキストをスライドさせない”のチェックを外せば有効になる | ||||
第1~5スライドのサブタイトル | スライド毎にサブタイトルの設定が可能 第2スライド以降は”テキストをスライドさせない”のチェックを外せば有効になる 尚、第2スライドのサブタイトルの表示ラベルが”第3スライドのサブタイトル”となっているが、誤字と思われる | ||||
行動喚起ボタンの URL | スライド上に設置可能なボタンのURLを指定する | ||||
行動喚起ボタンのテキスト | スライド上に設置可能なボタンのテキストを指定する ボタンが不要の場合はここを空欄にすればOK | ||||
モバイル用のスライダー | モバイル表示の時にスライダー(画像)がどの様に表示されるか 尚、フルスクリーンにしてもタイトルなどのテキストは回り込んで適切に表示される
|
ヘッダーメディア
ヘッダーの動画、画像に関する設定を行う
ヘッダー動画 | ヘッダーの種類で動画を指定した時に有効になる mp4形式の動画ファイルを指定するかYouTubeのURLを指定することも可能 動画サイズは1920 × 1080ピクセルを推奨とのこと | ||||
ヘッダー画像 | ヘッダーの種類で画像を指定した時に有効になる 新規画像を追加して指定する アップロードの際に画像を切り抜くこともできる | ||||
アップロード済みヘッダーをランダム表示 | 複数の画像をアップロードしてランダムに表示する時にこのボタンを押す ページを再表示する度に異なる画像がランダムに表示される | ||||
おすすめヘッダーをランダム表示 | Sydneyのおすすめ画像がランダムに表示されるのだと思うのだが、こちらの環境では何も画像が表示されなかった 恐らくどこかの設定だとは思うのだが分からなかった | ||||
ヘッダーの背景サイズ | 画像の背景サイズを指定する
| ||||
ヘッダーの高さ | ヘッダーの高さをピクセルで指定する デフォルトは300px | ||||
オーバーレイを無効化する | チェックをするとオーバーレイ※が無効化される ※オーバーレイとは写真の表面を半透過の膜で覆ってメニューやテキストを表示してる状態 |
メニュースタイル
メニューの表示形式に関する設定を行う
メニューの固定 |
| ||||
メニュースタイル | メニューの項目の表示位置の指定
|
ブログ設定以降は次回の記事に続く
こんにちは!
いつもありがとうございます:)
わたしもシドニーを使っているのですが、
投稿一覧のタイトルのフォント大きさの変更ってどうやってやるかわかりますか?
調べても全く出てこなくて困ってます?
宜しくお願いします!
りんかさん
おはようございます。
確かにシドニーは投稿一覧のタイトルの文字が少し大きめですね。
WordPressのメニューから外観ー>カスタマイズー>追加CSSで開いたCSS欄に、
を入れたら(自分の環境では)出来ました。
ブラウザでGoogle Chromeを使っているようでしたら該当のページを開いてF12を押すとデバックモードに切り替わるのでそこでクラスの情報とかを見れますよ。
https://www.souichi.club/wordpress/contactform7/
にちょっとだけChromeのデバックモードの記事を書いていますので参考にしてください。
質問失礼します!
今Sydneyを使って、会社のホームぺージを作成しています。
そこで、トップページは固定ページで作っておりヘッダーの種類は全画面スライダーにしています。
その他のページもすべて固定ページで作成しているのですが、ヘッダーはスライダーは無しでメニューのみにしたいのですが、サイトヘッダーの種類をヘッダーなし(メニューのみ)にすると、メニューまで消えてしまいました。これはどうやって表示するかわかりますか?
また、現在はサイトを非公開にして作業しているのですが、フロントページ以外のページでプレビューを押すたびにスライダーが表示されたりされなかったり不安定で、実際に公開した後どのようになるかわからず不安でいます。
お忙しいところ恐縮ですが、教えていただけますと幸いです。
ニシマオさん こんにちは
フロントページは「全画面スライダー」でフロントページ以外では「ヘッダーなし(メニューのみ)」にした時にフロントページのメニューが消えるという事でしょうか?
全画面スライダーの時のメニューは最初は消えていますがスクロールをすると表示されます。
また一番上にスクロールして暫く経つとメニューが消えますが、それの事でしょうか。
ちなみに自分の環境で上記の設定をしたのですが期待通りの動きになりました。
質問の意味を取り違えていたらすいません。
また、ホームページ設定のホームページと投稿ページではどの様な設定をしていますか。
あと、プレビューの時に不安定な動作をする時はSydneyのテーマに限らずですが時々経験しています。
「ん!」と感じた時は再読込をするかキャッシュ、Cokkieを削除して様子を見ていますね。
P.S.
プレビューでの検証よりもWordPress上は公開してしまってBasic認証をかけて検証をした方が
本番に近い状態になるかと思います。
ご返信ありがとうございます!
メニューが消えたのはフロントページではなくその他の固定ページです。
希望としてはフロントページは全画面スライダーを表示させて、その他の全てのページではメニューのみの表示にしたいと考えております。
ヘッダーの種類の設定は以下の通りです。
フロントページのヘッダー種類→全画面スライダー
サイトヘッダーの種類→ヘッダーなし(メニューのみ)
ホームページ設定は以下の通りです。
ホームページの表示→固定ページ
ホームページ→フロントページ(自作したフロントページ用固定ページです)
投稿ページ→選択なし
会社のホームページなので、newsの部分のみ投稿ページを利用することにして、その他のページは全て固定ページで作成したいと考えておりました。
アドバイス頂けますと幸いです。何卒宜しくお願い致します。
ニシマオさん こんにちは
メニューが消えたのは、その他の全てのページの方でしたか。
質問を取り違えていたようで失礼しました。
ただ、こちらの環境では指定した通りに表示されますね。
その他のページでもメニューがきちんと表示されます。
色々と設定を変えて試してみたのですが現象が再現できません。
なお、Sydneyのバージョンは1.54(最新)です
ちなみに外観ー>メニューでメニューに固定ページを追加する際に対象の固定ページが非公開だとメニューに追加が出来なかったので公開してメニューに追加しています。
もし可能だったらですが別のクリーンな環境にWordPressとSydneyをインストールしてホーム用ともうひとつ固定ページを作成してシンプルな環境で同じ現象が再現するかどうか試してみたらいかがでしょうか。
何か別の要因(どこか思わぬ設定を変えてしまった等)でメニューが表示されていないのかも知れません。
ご丁寧にご回答下さり感謝します。
おっしゃる通り、何か別の要因かもしれませんね。試行錯誤してみます。
ありがとうございました!
シドニーでカスタマイズはじめました、こちらド素人です。スマホプレビューにすると、ハンバーガーメニューが、真ん中ですが、右端にする方法がわからず困っています、よろしくお願いいたします(。>дд<)
ゆかこさん
コメントありがとうございます。
シドニーのスマホ時のメニューの右寄せですが簡単には出来ないようですね。
ただheader.phpとcssを編集すれば出来る様です。
こちらにやりかたが載っていました。
https://bit.ly/3btl76T
リンク先の記事の内容を要約すると、
1.header.phpを編集
※もし子テーマを使っているようならば親テーマからheader.phpをコピーしてそちらを修正してください
変更箇所は
となっている所を
に変更します
2.追加cssでcssを追加
上記1.の修正を行うとハンバーガーメニュータップ時に表示されるメニューが右にズレるので
外観ー>カスタマイズー>追加cssに
を追加します。
一応、右端に表示されました
シドニー画面ショット
うわ~~~( ;∀;)どうもありがうとうございました!!!できました!!!ほんとうにほんとうにどうもありがとうございます( ;∀;)
ご親切にご教授を頂いて、ありがとうございます( ;∀;)( ;∀;)
無事に表示できて何よりです?
他の方も参考になればと思い、別記事でアップしておきました
https://www.souichi.club/wordpress/sydney-theme-03/
本当にありがとうございます(。>ддд<)
こんにちは!sydneyでホームページ作成時に拝見させて頂いて、とてもお世話になっております。
sydneyのヘッダースライダーで4枚設定しているのですが、画像下部分が見切れてしまいます・・・。
直す方法等ご存知ではないでしょうか?よろしくお願い致します。
トミーさん
コメントありがとうございます。
すいません、ヘッダースライダーの画像下部が見切れるとの事ですがちょっと状況が
分かりませんでした。
自分の環境では下記の様にヘッダースライダーが表示されます。
縦長の画像を指定すると下の方が表示されないという意味でしょうか?
スライダーの表示領域と縦横比を合わせた画像を指定した場合はどの様に表示されますか。
ご丁寧なお返事ありがとうございます!
横長の画像を使っているのですが、
プレビューではちゃんと画像全部見えているのに実際ページを見てみると、下がきれてしまいます。
モバイルはレスポンシブにしているのですが、こちらはプレビューの時点から見切れてしまう状況です…
トミーさん こんにちは。
確かに下が見切れますね。
1920×920前後の画像であれば、まぁまぁマシに表示されますので試してみて下さい。
ただウィンドウサイズを変更すると正しく表示されない事があるようです。
プレビューで正しく表示されて実際のページで見切れるのはブックマークやWindowsの
タスクバーの領域を考慮していない為の様です。
CSSで調整できるかを試してみたのですが自分のスキルでは手強そうです。
ご返信&アドバイスありがとうございます!!試してみます!
sydney初心者です
全幅のページについてですが、PCで表示したときに横幅が大きすぎる気がしまして…。
PCの時だけ左右の余白を広げるにはどうしたらよいのでしょうか?
標準の機能だと上下の余白しか変更できないようですね。
CSSで出来るのかも知れませんが難易度が高そうです。
はじめまして。
WP初心者で参考にさせていただいています。
Sydneyでポートフォリオサイトを作成しているのですがフロントページの表示について質問させてください。
基本的にブログとしてではなく、投稿で画像を更新するのみの予定なんですが
フロントページに固定の説明文と投稿画像を一緒に表示するにはどのような設定にすればいいのでしょうか。
表示設定→固定ページにチェック、ホームページで固定説明文を選択 だと説明文しか表示されず。。
上手く説明できずすみません。よろしくお願いいたします。
ゆうさん こんにちは
どの様な形にしたいのかをイマイチ理解できていないのですが、以下の様な手順ではいかがですか。
最初に新規に固定ページを作成して、仮に「写真の一覧」とタイトルを付けます。
固定ページには上から写真1、写真2、写真3と画像ブロックを貼り付けます。
画像ブロックの貼り付け方は左上の+ボタンを押してブロック一覧から画像を選択してアップロードで画像を選択します。
次にWordPressのメニューから外観ー>カスタマイズー>ホームページ設定ー>ホームページの表示で”固定ページ”を選択します。
その下のホームページで先程作成した「写真の一覧」(固定ページ)を選択して「公開」ボタンを押します。
するとトップページのヘッダーの下に先程作成した画像の固定ページが表示されます。
返信ありがとうございます!
教えていただいた方法で試してみます。
ありがとうございました
初めまして、コメント失礼いたします。
コーディング自体の経験は長いのですが、昨今の状況を見てWPの技術を取り入れるべく、先日からWPに挑戦を始めた実質初心者です。
こちらにはシドニーテーマのカステムについて調べていた所辿り着きました、わかりやすい解説でまとめられており大変助かっています。
その中で調べても詳細な部分が出てこない疑問点がありよろしければご教授頂きたくコメントをさせて頂きました。
1.ヘッダーの動画挿入について
挿入したい動画について容量の問題があったため、画質を優先しyoutube動画リンクを行いました。
動画表示はされるのですが、自動再生ができない・ループしない・大きさが縦の幅に固定(基準)される(恐らく別で指定している高さになっていると思います…)と理想通りになりません…
色々調べて模索したのですが、コードの書き換え場所がわからず設定するファイルもわからない状態です。
音は無音でよいので、「横幅をウィンドウに合わせる・自動再生される(iOSでも)・ループする」これらの条件が満たせる記述方法はありますでしょうか?
2.子ページヘッダーについて
トップページは上記のように動画、子ページについては静止画画像を表示させたいのですがこちらは可能でしょうか?(個別でヘッダーを指定するようなイメージです)
3.メニューについて
説明が少し難しいのですが、
・メニューに画像を設定し、マウスオーバーで変化を入れたい
・画像はウィンドウのトップピッタリから載せたい
上記のようなイメージで作成したいのですがうまく行きません。
divで囲って適用範囲を見たのですが上部にどうしても余白が入っているようで、ピッタリと反映されませんでした…
最悪画像挿入は諦めて、cssで似たものを作ってもよいのですが上にくっついてくれない状態です。
上記3点が解決出来れば完成という状態なのですが、当方の知識がまだまだ浅くさまざまなサイトを見て情報を集めても記載されているファイルやコードが見つからなかったり苦戦しております…
長々と申し訳ございません。また、既出情報でしたらURLなどでご誘導いただけると幸いです。
お手隙の際にでもご教授頂ければ嬉しく思います、宜しくお願い申し上げます。
追記ですみません…!自動再生はされているようで、ループされてないだけでした、すみません!これについてはiOSでの自動再生になります…!
ゆんさん こんにちは
1ですがヘッダーメディアにYoutubeのURLを指定するとループ再生しない様ですね。
動画ファイルを指定するとループ再生をするようです。
アップロードサイズですがWordPressはデフォルトで2Mの制限があります。
php.ini の upload_max_filesize と post_max_size が2Mになっているので50M 等に変更すれば大きなサイズの画像、動画をアップロード出来るようになります。
お使いのサーバーのOSが分かりませんがLinux(Debian系)であれば、/etc/php/phpのバージョン番号/apache2/ 辺りにあります。
「wordpress アップロードサイズ」辺りで検索をすれば記事が出てきます。
2の子ページのヘッダーについてですが、子ページとは投稿記事や固定ページの事でしょうか。
その場合はそもそもヘッダーエリアはトップページにしか無いように思うのですが。
投稿記事のページ(子ページ)にもヘッダーエリアが表示されてしまうのですか?
3のメニューの画像ですがプラグインを使用したらどうでしょうか。
下記の動画は Menu Image, Icons made easy というプラグインを使っています。
メニューを画像にするプラグイン
ご丁寧な返信、ありがとうございました!
1につきまして、サイズ制限が解除出来ることを初めて知りまして、目から鱗です…!早速こちら試してみたいと思います!
2につきましては当方の伝え方が悪く申し訳ございません。固定ページの事です。ただこちらは自己解決至りまして、無事予定通りの設定ができました。ご回答ありがとうございました。
3のメニュー画像について動画でのご説明ありがとうございます、確認させて頂きました!一先ずオススメ頂いたプラグインを元に、理想系にカスタマイズ可能かどうか試してみようと思っております。
どうしてもWPではない通常のコーディング方法が先に浮かびそれをWPに反映していくのが中々難しく悩んでいたのですが、色々と糸口を見つけれそうです、本当に有難うございます!
初めまして。
コメント失礼いたします。
初めて自分でホームページを作るにあたり、かなり参考にさせていただいています。
現在、スマートフォン用にページの編集をしているのですが、ヘッダースライダー の文字サイズが変えることができず、見栄えがあんまりよくない感じになってしまいます。
そこで、もしよろしければ、ヘッダースライダー の文字サイズを変える方法を教えていただけると嬉しです。
ほっしーさん こんにちは。
テーマの標準的な機能ではタイトルやサブタイトルのフォントサイズは変更できないみたいですね。
CSSで対応するしか無いと思います。
外観ー>カスタマイズー>追加CSSで以下のコードを入れてみてください。
font-sizeは適当に変えてみてください。
ご回答いただきありがとうございます。
コード埋め込んでみたら、だいぶみみやすくなりました。
ありがとうございます。
引き続き、ご参考にさせていただきます。
こんばんは!初めてコメントさせて頂きます。
Sydneyで、ハンバーガーメニュー(三本線)の下に「MENU」という文字を入れたいのですが、どのようにすればいいか分からず、こちらのサイトに行きつきました。
あまり詳しい知識はありません。
ご教授頂けましたら幸いです。よろしくお願いいたします。
やまぐち さん
こんばんは。
1.まず3本線の下にMENUの文字が入った画像(300×300程度)を作成します。
2.そしてその画像をメディア・ライブラリーに新規追加(アップロード)します。
3.追加した画像をクリックした後、「URLをクリップボードにコピー」ボタンを押して画像へのURLを取得します。
4.WordPressのメニューから外観、カスタマイズ、追加CSSをクリックします。
5.表示される追加CSS欄に以下のコードを貼り付けます。
公開ボタンを押すと以下の様に表示されます。
かしこまりました!
お早いご回答と、とても分かりやすいご説明、ありがとうございます!
早速やってみます!!
初めまして。シドニー初心者です。
会社のホームページを作成していまして、固定ページでカバーを利用した際に画面を全幅に変更する方法を教えていただきたいです。
他の固定ページはFULL widthで全幅に変更できております。ご教授いただけますと幸いです。よろしくお願い致します。
マリーさん こんにちは。
投稿ページだと「個別投稿ページを全幅にする。」オプションがありますが固定ページにはありませんね。
を指定できればいけそうではありますが、正直良くわかりませんでした。(泣)
はじめまして、sydneyを使用してみました。
とても参考になることが多く、助かっています。ありがとうございます!
一点困っていることがありまして、知見をお借りしたく。。
やりたいことは、portfolioの「すべて表示」を消したいです。
widgets/fp-portfolio.phpの57行目
==
$output .= ‘‘ . $options[‘show_all_text’] .’‘;
==
をコメントアウトすればいいのでは・・・と思ったのですが期待する動作にならず。。
いっそcssで「すべて表示」のdisplay切って、上のファイル60行目のforeachで最初のdata-filterにclass=’active’を付与しようとも思ったのですがこちらもだめでした。
お忙しいと思いますが、お助け願えれば幸いです!
skyさん
こんにちは。
すいません、ポートフォリオはどの様に作成しているのでしょうか?
固定ページにギャラリーブロックなどを貼り付けてポートフォリオを作成していますか。
それともウィジェットか何かでしょうか。
「すべて表示」が表示される状況が良く分かっていません。
はじめまして、お世話になります。
sydneyでサイト作成していますが、ヘッダー動画のサイズカスタマイズしたいのですが、可能でしょうか、
具体的には、横幅はそのままで、高さを600px 前後にしたいのですが、 You Tubeのリンクを利用します。
忙しいところ、すみませんが、アドバイスいただけると、嬉しいのですが、よろしくお願い致します。
喜屋武さん
コメントありがとうございます。
追加CSSでちょっと指定して見たのですがサイズは自動的に調整させてしまう様ですね。
うまく設定することができませんでした。
忙しいところ、コメント下さり、ありがとうございます。
変更は、無理でしたか、 大変お手数おかけしました。
ありがとうございます。 感謝致します。 感謝!