サポート » テーマ » Lightning で「メニュー」の位置にサイト内検索ボックスを配置するには?

  • 解決済 YZ

    (@akkeyyyy)


    <環境 (バージョンは全て最新)>

    (a) テーマ: Lightning 3.0.4
    (b-1) プラグイン: Lightning Advanced Unit 2.0.1
    (b-2) プラグイン: VK All in One Expansion Unit 5.3.5
    (c) サーバ: さくらインターネット さくらのレンタルサーバ スタンダード

    上記で稼働させております。

    Lightning テーマでは、デフォルトでは、サイト内検索ボックスは、コンテンツエリアの右サイドバー内に配置されています。

    しかし私は、このサイト内検索ボックスを、Lightning テーマにおいて一般に「メニュー」と呼ばれる位置 (画面右上部分。サイトのタイトルまたはロゴの右の右寄せの位置。一般的なビジネスサイトで「会社概要」や「商品一覧」や「ブログ」などの文字を横一列に配置してリンクとする部分) に、配置したいです。

    ネットで調べてみましたが、上記を実現する手法は見つけられませんでした。

    つきましては、どのように操作・処置すれば上記が実現できるか、お教え願えないでしょうか。

    なお、私のスキルはおおむね下記のようなものです。

    (1) (X)HTML や CSS はベタ打ちができます。
    (2) PHP わかりませんが、他の言語での簡単な Windows アプリの開発経験はありますので、プログラミング言語一般についてのごく基礎的な知識や「感覚」はあると思います。
    (3) MySQL 構文もわかりませんが、かなり具体的なご助言を頂ければ、あとはネットで調べるなどして、扱えると思います。

    どうかよろしくご助言のほど、よろしくお願い申し上げます。

15件の返信を表示中 - 1 - 15件目 (全21件中)
  • まず子テーマを作っていないなら、
    子テーマを作って作業されることをおすすめします。

    子テーマがあるならそこへ、
    親テーマからheader.phpをそのままコピーしてください。
    そして、その中の最後の方の行に

            <?php
            if ( $gMenu ) {
                echo '<div id="gMenu_outer" class="gMenu_outer">';
                echo $gMenu;
                echo '</div>';
                echo get_search_form(); //この行を加える
            } ?>
        </div>

    子テーマのstyle.cssに以下のコードを記入してください。

    ul.gMenu {
    	margin-top: 8px;
    	float: left;
    }
    form.searchform {
    	float: right;
    	margin: 10px 0 0 0;
    }
    @media (max-width: 991px) {
    	form.searchform {
    		position: absolute; //このコードについてはあまり自信がありません
    		top: 0;
    		right: 50px;
    	}
    }

    メニューの数によってはうまく表示されないかも知れません。
    メニューの表示位置とか、検索の表示などお好みで調整してみてください。

    • この返信は7 ヶ月、 1 週前に  ioxrxogi さんが編集しました。理由: 修正
    YZ

    (@akkeyyyy)

    申し訳ありません、全ておっしゃるとおりに処置したのですが、サイトの表示は変わりませんでした。

    おそらく、おっしゃる通りの処置をした後に、カスタマイズの操作をする必要があるのかな、と思いまして、ネットを探しました。いくつかのサイトに出てくる、「『通常の』メニュー」の作成方法を参考に、「ダッシュボード > 外観 > メニュー」と進んで、サイトにあるように作業しようとしたのですが、あるはずの設定項目が無かったりで、先に進めなくなってしまいました。

    大変初歩的だと思われ、申し訳ないのですが、おっしゃる処置をした後、どのようにすればよろしいか、ご助言を頂戴できないでしょうか?

    どうかよろしくお願い申し上げます。

    なお参考までに、子テーマの style.css の内容は次のようにしてあります (合っているのでしょうか?)。

    
    /*
    	Theme Name:	Lightning の子テーマ
    	Template:	lightning
    /*
    
    @import url(../lightning/style.css);
    
    ul.gMenu {
    	margin-top: 8px;
    	float: left;
    }
    form.searchform {
    	float: right;
    	margin: 10px 0 0 0;
    }
    @media (max-width: 991px) {
    	form.searchform {
    		position: absolute; //このコードについてはあまり自信がありません
    		top: 0;
    		right: 50px;
    	}
    }
    
    CG

    (@du-bist-der-lenz)

    functions.php エンキューを記述する方法が、子テーマの作り方の現代流儀ですが、インポートのルートが間違ってないなら問題無いでしょう。
    そのうえで、スタイルシートはカスタマイズの追加CSSに書くのが良いでしょう。
    そこで気になったのが、header.phpはコピーして子テーマに作った方を編集しましたか。

    get_search_form(); を使ったケースでは、検索フォームのデザインは、テーマに依存するようです。
    http://wp.me/P8xYR5-Jg

    YZ

    (@akkeyyyy)

    CG 様

    functions.php エンキューを記述する方法が、子テーマの作り方の現代流儀です

    そうでしたか。ありがとうございます。今後はその方向で勉強したいと思います。

    インポートの記述は間違っていないと思います。

    また、header.php も、前出の ioxrxogi 様からお教えいただいた通り、親テーマからコピーしたものを編集しました。

    get_search_form(); を使ったケースでは、検索フォームのデザインは、テーマに依存するようです。

    ここで「デザイン」とおっしゃるのは、その表示位置も含めて、という事でしょうか? そうだとしますと、本件については行き詰まり、という事になるかもしれません……。

    なお例示いただいた URL ですが、まさにそのサイトのように検索ボックスを表示したいのです (ただし、”Broadway”, “Entries”, … などとある 4 つのメニューは不要です)。一応ソースを見てみたのですが、複雑すぎてさっぱりでした。

    • この返信は7 ヶ月、 1 週前に  YZ さんが編集しました。理由: 引用のためペーストした文字列が誤っていた
    CG

    (@du-bist-der-lenz)

    「ヘッダーのナビゲーションメニュー自体が不要で、検索フォームを表示したい」であれば、「検索フォーム」を命令の外側に出したうえで、メニューで「Header Navigation」のチェックを外します。

    子テーマのheader.php

     <?php
            if ( $gMenu ) {
                echo '<div id="gMenu_outer" class="gMenu_outer">';
                echo $gMenu;
                echo '</div>';
            } ?>
    <?php get_search_form(); ?>//この行を加える
        </div>

    http://wp.me/P8xYR5-Jg

    YZ

    (@akkeyyyy)

    CG 様

    重ね重ね申し訳ございません、やはり、初心者にもかかわらず色々なことを一度に覚えたり、自己流で設定を試みた部分があるせいか、近いところまでは実現できるのですが、他の設定が食い違っているのか、別の部分で問題が出てしまいました。

    (ちなみに今回、検索ボックスはおおむね狙ったところに出ましたが、ボックスとボタンが横に長~く伸びてしまい、ボックスの左端がロゴ画像に達してしまいました。また、ロゴ & 検索の行の下の行に、コメントアウトされているはずの「//この行を加える」が表示されます (^ ^;) ここらになると、少し PHP を勉強しないとならないですね)

    ご提示いただいている参考 URL は、CG 様がマルチサイトで一々サンプルをお作りくださっているという事なのでしょうか?

    このフォーラムには画像が貼れませんので、私のような初心者は、今のところ、困った状況を「視覚的に」説明申し上げるしかないわけですね。そこで、もしフォーラムの規約上問題がなければ、私も、「こうなってしまいます」という例示ができるよう、CG 様のように、別途サーバを借りて、匿名性を確保した上で、自分が困っている状況をそのサーバ上に再現して、こちらのフォーラムで提示し、ご助言を頂きやすくする環境を作ってみようと思います。

    あまり繰り返し初歩的な質問を繰り返すのも心苦しくなってきましたので、まず前段の環境を作ってから、改めて初歩から WordPress を勉強し (その場合でも、Lightning テーマは最初から入れるべきでしょうね? いずれにしても、デフォルトで別のテーマが入っているわけですし……。あるいは、Lightning よりもシンプルなテーマで勉強してからにするべきかもしれません)、わからない事は、CG 様のようにリンクでお示し申し上げようかと思います。

    大変ありがとうございました。

    メニューがいらない場合は、CGさん書かれているコードで表示されるはずですが……。

    ちなみに、子テーマはちゃんと有効になっているのでしょうか。
    書かれているCSSのコードが間違っているようです。(転記ミスだと思いますが)

    /*
    	Theme Name:	Lightning の子テーマ
    	Template:	lightning
    /* //この部分は以下のようにしないと
    */

    コードが全てコメントアウトになってしまいます。

    子テーマが有効で編集しているページが間違っていないかどうか、
    たとえば、header.phpの最初の方のコードに適当に文字を打って表示されるか確認してみてください。
    (わたしは確認する時に使っている方法です)

    <header class="navbar siteHeader">12345

    ヘッダーに打ち込んだものが出てくれば、子テーマは生きていると思います。

    追記
    行き違いになってしまいましたね。
    //この行を加える
    はなくてもいいので消してください。
    (<?php ?>の間にあればコメントアウトします。)

    検索ボックスが出たなら、あとはCSSで加工するだけですので、
    PHPとかは関係ないですよ。

    • この返信は7 ヶ月、 1 週前に  ioxrxogi さんが編集しました。
    YZ

    (@akkeyyyy)

    ioxrxogi 様

    書かれているCSSのコードが間違っているようです。(転記ミスだと思いますが)

    ううっ…実際に間違えていました…。ご指摘ありがとうございます。

    header.php に同じようにしてみたところ、実際に文字が表示されました。

    お言葉を返すようですが (?)、やはり私はちょっとだけ PHP を勉強しなければならないような気がします…。そもそも、「<?php … ?> で囲まれている部分が PHP」という事さえ知らなかったですから (それで「プログラミングの『感覚』を持っていると言えるのか」と言われると、返す言葉がございません)。

    大変、大変、お手数をおかけいたしました。感謝申し上げます。

    CG

    (@du-bist-der-lenz)

    <!-投稿でエクスクラメーションマークではさんだ文章は表示されない->ですよね、プログラムは一対のタグがセットになっていて、<?phpの間をPHPプログロムで実行しろという命令?>ですよ、ということです。

    相談があれば、実際試しながら返信しています。実際の問題サイトを示してもらうのが、簡便に言葉だけで片付きますが、「視覚的に」イメージだけで良ければ画像の添付、動いているのが向いていればサイトのリンクをしています。
    マルチサイトの時もありますが、今回は違いを確認できるように、1ページだけ異なるヘッダーを読み込ませています。
    http://wp.me/P8xYR5-Jg

    本来はSaitamaテーマの検証目的と利用しています。
    本来はSaitamaテーマを利用しています

    Lightningテーマでサイトを作る必要性がないのであれば、ナビゲーションメニュー位置に検索フォームのあるテーマを選ぶのが良いでしょう。

    わたしは基本、ググってコピペですよ。
    PHPがわかっているわけではありません。

    目的がコンテンツを作ることなのか、
    プログラミングすることなのか、
    その辺どちらよりかで考え方も違ってくると思いますが、

    YZさん、がんばってください。

    YZ

    (@akkeyyyy)

    >CG 様

    本来はSaitamaテーマの検証目的と利用しています。

    そのテーマは、(CG 様が制作なさっているものを拝見する限り)すばらしいですね。

    入門書では、Lightning がよい、よいと書かれている(万能だとか、専用の多機能プラグインがあるからとかで)ので、てっきり Lightning は鉄板なのだと思っていました(慎重に言うべきことではありますが、マーケティングなのでしょうか…?)。Lightning は、そのままですと、ブラウザの表示画面の縦横の長さを色々と帰ると、ロゴやメニューが微妙な場所に来ますし、コンテンツエリアの両端と、ロゴの左端&メニューの右端が合わないなど、正直、配置の比率が美しくないと感じてしまいます(もちろん、カスタマイズすれば解決できるのでしょうが、私のスキルでは到底無理です)。その点、Saitama テーマは、とても美しいと思います。

    Lightning テーマと Saitama テーマを比較した場合、万能性、一般的なプラグインとの親和性、デフォルト状態での視覚的デザインの整い方の度合い、カスタマイズ可能性、その他、これからWPに精通した人間になりたいと思っている人間にとって、どちらが好ましいでしょうね。……私は今は、デフォルトの状態に(プラグインなどを入れると、どの機能がデフォルトでどの機能がプラグインによるものなのかわからないので、プラグインは入れていません)画像や文字列などのコンテンツを入れて比べるのが精いっぱいです。

    Lightningテーマでサイトを作る必要性がないのであれば

    実は私は、Lightning テーマを使うべきか否かということ以前に、サイト全体を構築するスキルを得るにあたって、まずWPを勉強すべきなのか、それとも、Dreamweaver + Bootstrap をやってみるべきなのかも、確信できていません。

    しかし、WPにある程度精通しなければならないのは、仕事の性質上はっきりしていますので、その意味では、WPを勉強したり、こちらで CG 様ほか皆様にご助言いただいていることなどは、一切無駄ではありません。

    ですので、どうか今後もよろしくお願い申し上げます。

    なお、新しいトピックを作りましたので、よろしければそちらの件でもご助言を頂戴できれば助かります。本当に図々しくて申し訳ありません。

    >ioxrxogi 様

    目的がコンテンツを作ることなのか、
    プログラミングすることなのか、
    その辺どちらよりかで考え方も違ってくると思いますが、

    上記の、CG 様への返信をご覧いただいてもおわかりかと存じますが、……両方ですね。

    基本、私は視覚的なデザインや、ネットでのマーケティングをしてきましたので、「コンテンツ」寄りではあると思いますが、この視覚的デザインも相当タイトに作りこみますし、これからはサイト全体の構築をしていかなければならないという事情もございますので、「両方」ですね。

    PHP については、ある程度代わりにやってくれる方が身近にいるのですが、お願いするにしても、基本がわかっていなければ、あまりにも多くの不都合(コミュニケーションの齟齬など)が発生しますので。

    がんばります。ありがとうございます!

    CG

    (@du-bist-der-lenz)

    現在、「Lightning で「メニュー」の位置にサイト内検索ボックスを配置するには?」ということで、Lightningテーマだけをインストールして、推奨プラグインの Ligthning Advanced Unit (Free) と VK All in One Expansion Unit (Free)はインストールしていません。
    Lightning テーマは、そうしたアドオンプラグインをアピールするためのマーケティングです。アドオンプラグインの有料版を合わせて使うことで、最大限の効果を出します。
    一方、Saitama テーマは未完成の部分が多く、意味をなしていないコードが散見されます。というのも教材向けを目的としているためのようです。Lightning テーマの鉄板ぶりと高対象と言って良い。その分、プレーンな正確を伸ばすと良いと感じているので、アップデートでどう変化していくか、それともここでストップするか楽しみにしている次第です。

    ロゴ配置や、両端の調整は、現在のWordPressではパーツのドラッグドロップで実現します。Twenty Fifteen, Twenty Sixteen, Twenty Seventeen テーマはベースに最適だし、テーマ自体がプレーンなレイアウトのテーマである方に、わたしは魅力を感じています。
    しかし、サイトの性格に合うテーマを使って、簡単に構築するのも対極にありますね。

    検索フォームをメニュー一と入れ替えるという目的は果たしたと判断して、Saitamaテーマに戻して更新を進めます。

    色々ありがとうございます。

    別の質問でも書きましたが、とりあえず、デザイン以前に、いろいろな機能的な事項の基礎を身に着けなければならず、その事項の数が非常に多い状態だということに気づきました。

    当該の別質問は、内容が漠然としすぎているせいか、回答がつきませんので、それはクローズして、ポイントを絞って質問しようと思っております(プラグインでパスワードをかける)。

    そのため、せっかく Saitama テーマを教えていただこうとしていたところですが、テーマの勉強は、少しの間中止しようと思っております。

    大変失礼ながら、その後、またお教えいただいてもよろしいでしょうか? また、上記の、ioxrxogi 様への返信にも書いたとおり、本当はかなりタイトにデザインをコントロールしたいので、その点から言えば、ベースとするテーマをきちんと選び直したいという気持ちもあるのです(最終的には、原テーマの、「デザインの著作権表示」〔機能に関する著作権ではなく〕を削除しても法的・倫理的に問題がないと言えてしまうほど、オリジナルなものにしたいと思っております)。なぜなら、Lightning も、Saitama も、「たまたま縁あって出会った」ものですので、それが偶然、私の目的から言って最適なベースであったという確率は低いからです。その辺の事情も汲んでいただいた上で、ぜひまた、ご助言いただければ大変助かります。

    以上のようなわけですが、このスレッドはクローズしたほうがよろしいでしょうか? あるいは、このまま残しておいて、時期が来たら戻ってくるべきでしょうか?

    失礼、上記に「別質問に回答がつかない」と書きましたが、当該の質問は、まだ「システムの承認待ち」のようです (承認待ちの間は、投稿自体がそちら様からは見えないのですよね?)。承認が下りるのを待ってみます。

    CG

    (@du-bist-der-lenz)

    サイトで商品を扱うなら、WooCommerceに対応したテーマ。
    掲示板スレッドを運用するなら、bbPressに対応したテーマ。
    レビュー記事中心で更新する場合は、レビュー系プラグインの配置が見やすいテーマを選ぶといった、運営サイトの正確を明確にしておくことが、まずありきです。
    通販サイトでも、細々しい機能を必要としないケースもあるので、テーマをデザインする方々も、そのターゲットが難しいところではないでしょうか。

    オリジナルなものといっても、色使いや配置、バランスの程度では、ベースになるテーマを見つけることを勧めます。
    Lightning も、Saitama も、プラグインの組み合わせや、スタイルシートの活用で、個性派出ます。それぞれに推奨のアドオンプラグインがインストールを求めますが、同様なプラグインを代わりに使うのも方法です。

15件の返信を表示中 - 1 - 15件目 (全21件中)
  • トピック「Lightning で「メニュー」の位置にサイト内検索ボックスを配置するには?」には新たに返信することはできません。