サイトタイトル(ロゴ画像)右横に会員登録・ログインボタンを設置する方法

Simplicityの特徴 フォーラム Simplicityについての質問 サイトタイトル(ロゴ画像)右横に会員登録・ログインボタンを設置する方法

このトピックには7件の返信が含まれ、1人の参加者がいます。7 ヶ月前 Hidekichi さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #51876 返信

    WPBG

    お世話になっております。
    Simplicityを使わせてもらい、とても気に入っており、ちょこちょこ自分で調べて
    サイト作成させていただいております。

    作成していて、自力でカスタマイズ出来そうにないので、お力をお借りしたいと思っています。

    https://goo.gl/dy4uWW
    URL先の画像のように、タイトルロゴ横に会員登録・ログインボタンを設置したいのですが、
    どのように変更すればよろしいのでしょうか?

    すみませんが、よろしくおねがいします。

  • #51885 返信

    Hidekichi

    今現在どうなっているのかと、登録・ログインがwordpressのログインなのかまた別のbasic認証なのかそのあたりの詳細が必要です。またそれらすでに認証ページは作られていてリンクを貼れば動作するのかなども念の為書いて下さい。

    最も重要なのはヘッダーが今現在どのような構造になっていて、ロゴ画像のサイズはいくつで、PCの時はおそらくリンク先のような感じなのでしょうけれども、タブレットや、スマホの時はどうするのかなどの仕様を決めることです。タブレットやスマホは縦横の向きがあるため、画面幅いくつの時に、どこに何を置くと言う指示ですね。

    これらがわからないとどこの何を触ってどのようにスタイルするかは指示ができません。
    ヘッダーのことなのでjQueryでできることも、phpでやったほうがちらつきがなくなるため良いかと思います。そうなると、header.phpをカスタマイズする必要があるかと思います。要素を入れることは別にどんな手法を使ったとしても良いかとは思いますが、どの端末のどの画面幅の時、どこにどのように出すのかの仕様は決めておいてもらう必要があります。

    それら素材が既にあってスタイルするだけなのであればそれはそんなに難しいものではありません。

  • #51909 返信

    WPBG

    登録・ログインは別のbasic認証です。またそれらすでに認証ページは作られていますが、まだリンクを貼れば動く状態ではありません。

    いまヘッダーはヘッダー背景色を#ffb700に指定・ロゴ画像(サイズ115×50)をサイトタイトルに中央寄せしております。
    またおっしゃる通りPCの時はおそらくリンク先のような感じで考えています。
    タブレットや、スマホの時ですが、今回はPCのみうまく表示されていれば良いので、取り敢えず現在は特に考えていません。

  • #51917 返信

    Hidekichi

    ひとまず見た目的にどうなのかと言う所から、サンプル作りました。

    サンプル: ロゴを入れてその右側にボタンを設置 | codepen

    こんな感じになりますが、何が不要で、サイズ感はこんなもので良いのかどうかをチェックして下さい。

    サンプルではjQueryでやってますが、実際にはPHPで#header内に入れるほうが良いかと思います。
    buttonの動作は、サンプルではリンクでやってますが、何かしらフォームのアドレスなどがいるならそれも書いて下さい。

    おおまかに問題なければ、これらで出力されるものをheader.php等にhtmlで書くだけですが、親テーマに書いてしまうとアップデートでなくなってしまうので、子テーマにコピーしてそこに書くことになります。

    現物が見れないので、何をどうするべきかは見れるもので確認するしか無いため、そのためのサンプルです。

  • #51927 返信

    WPBG

    Hidekichiさん、サンプル作成ありがとうございます。お手数おかけします。

    ヘッダー内のSNSボタンは配置はしておらず、会員登録・ログインボタンだけ置くのをイメージしております。
    また、ボタンは押すとリンク先に飛ぶようにするつもりです。

    こちらですが、ボタンを背景の色と同じにしボタンのサイズを変えたいのですがそれも変更というのは可能なものでしょうか?

  • #51933 返信

    Hidekichi

    サンプルをアップデートしました(アドレスは前のと同じ)。

    例えば#h-topを200pxにしたとしてもロゴと会員登録部分は縦センター寄せになっています。
    ボタンは、buttonをやめて、divでbutton風にしてあるだけです。外部で開く場合はtarget=”_blank”を入れるだけなので、サンプルではこれらを入れていません。

    > ボタンのサイズを変えたいのですが
    > それも変更というのは可能なものでしょうか?

    サイズは変えられます。上記の変更のように通常のdivにしましたので、単にリンクがボタン風にしてあるだけと考えて下さい。サイズをどのように変えても縦中央に寄ります。

  • #51989 返信

    WPBG

    Hidekichiさん、サンプルアップデートありがとうございます!
    まさに実装したいデザインでした。

    重ね重ねすみません、こちらのボタンをクリックし、任意のリンク先に飛ばしたい
    場合はどちらにURLを入力すればよろしいのでしょうか……
    htmlのどこに該当しているのかがピンとこず……

  • #51990 返信

    Hidekichi

    まずheader.phpを子テーマにコピーします。
    カスタマイズする箇所は、

    <div class="alignright top-sns-follows">
      <?php  if ( is_top_follows_visible() ):
      <?php get_template_part('sns-pages');
      <?php endif; ?>
      // ここ
    </div>

    「ここ」に、jQueryの構造通りのhtmlを入れます。

    <div class="registers">
      <a href="登録用のアドレス">
        <div class="regist">会員登録</div>
      </a>
      <a href="ログイン用のアドレス">
        <div class="memberLogin">会員ログイン</div>
      </a>
    </div>

    こういれます。逆を言えばjQueryでは、上記のhtmlを挿入していることになります。

    header.phpを子テーマにコピーするのは、親テーマのアップデートによりカスタマイズが無くなるのを防ぐためです。jQueryでも結果的に同じことをしているのでjQueryでもよいのですが、jQueryは読み込まれてからようやく処理をするため、htmlの挿入までにラグがあり、ヘッダなどの見える場所に適用するためにはもうひと工夫手を加えることがあります。

    サンプルはscssでスタイルしています。サンプルのcss欄の下向き三角からview compiledを選択するとcssに変換されます。これを子テーマstyle.cssにコピペします。

    css欄の一番下に書いてある、#header .sns-pages { display:none; } はヘッダー内のフォローボタンの非表示です。不要とコメントしてありますが、必要であれば入れておいて下さい。

    前に書いたレスでも触れましたが、レスポンシブには対応していませんのでpcのみのスタイルです。
    くれぐれもscssはブラウザがめませんので、cssに変換したものを利用して下さい。

    またSimplicityの元々のスタイルを上書きすることでスタイルしていますので、カスタマイズの状況や他のスタイルによっては正しく動作しない可能性もあります。そういう場合はデベロッパーツールでcssのプロパティを確認しながら手を加えて下さい。

    更に最重要なことですが、Simplicityのアップデートでヘッダーの仕様が変わる場合があります。これはwordpressのアップデートに伴うこともあるでしょうし、わいひらさんの気分もあるかも知れません。それらが行われた場合は、必ずその内容を確認して、必要な部分を子テーマにコピーしたheader.phpに適用して下さい。

    元に戻す場合は、子テーマのheader.phpを削除してしまえば元に戻りますが、header.phpは特に重要なファイルでもあるので、何をやっても上手く行かない場合は、子テーマjavascript.jsにjQueryをまんまコピーして、btnUrl1、btnUrl2にそれぞれのアドレスを入れれば動作するかと思います。

    手を加えた後、何が問題かがわからない場合は、サイトのアドレスを公開してもらわないと何が問題かを指摘できないかと思います。

    本番サイトにいきなりやるのは問題があるのであれば、ローカル環境を作ったり、cloud9などのテスト環境を用意して十分にテストしてから本番サイトに適用して下さい。重要なファイルのカスタマイズなので、バックアップを取りながら、元に戻せるようにftpを利用してカスタマイズを行って下さい。wordpress上からの編集はかなり危険です。ご自身でリカバリーできるようであれば止めはしませんが、なるべくローカルでシンタックスのチェックをして間違いがないように。

返信先: サイトタイトル(ロゴ画像)右横に会員登録・ログインボタンを設置する方法
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)