サポート » テーマ » Onepressでログインボタンを取り入れたい。

  • 解決済 mituru0622

    (@mituru0622)


    バージョン
    Wordpress5.1.1
    プラグイン
    easy degital download
    simple membership
    テーマ
    onepress

    いつも皆様の意見を参考にしております。
    まったくの初心者ですが熱意だけでサイトを作っています。

    上記のテーマを利用して有料会員制販売サイトを作成しています。
    onepressにはログイン機能が組み込まれていないようなので、自分で作成しないと
    いけないようです。
    固定ページにログインページを作成して、ヘッダーのメニューに反映すればログインは
    問題なくできるのですが、ログイン後にログアウトの表示に変更することができません。
    下記参考サイトのように右上に全体CSSを反映したログイン・ログアウトボタンを
    作成したいのですが、どのようにすればよいでしょうか。
    https://uchiyoga.jp/

    いろいろ検索して試してみたのですがどうにもうまくいきません。

    皆様のお知恵をぜひ拝借したいです。
    よろしくお願いいたします。

    • このトピックは mituru0622が2 ヶ月前に変更しました。
6件の返信を表示中 - 1 - 6件目 (全6件中)
  • CG

    (@du-bist-der-lenz)

    「onepressにはログイン機能が組み込まれていない」とは、「simple membership」プラグインとの相性が合わないということですね。「easy degital download」プラグインが、合わない可能性は十分考えられますから、他のテーマでは組み込まれているわけですから、そちらを選択肢とするのがスマートではないでしょうか。参考サイトのようにしたいのですから、そのサイトでの組み合わせに習うのが良いでしょう。

    ishitaka

    (@ishitaka)

    こんにちは

    いろいろな方法が考えられますが下記の方法はどうでしょうか?

    1. 子テーマを作成する。
    2. 子テーマの functions.php に下記コードを追加する。
      function my_login_button() {
      	if ( is_user_logged_in() ) {
      		$label = 'ログアウト';
      		$link = wp_logout_url( get_the_permalink() );
      	} else {
      		$label = 'ログイン';
      		$link = get_permalink( get_page_by_path( 'login-page' )->ID );
      	}
      	echo '<nav id="site-navigation-button"><ul class="onepress-button"><li><a href="' . esc_url( $link ) . '">' . $label . '</a></li></ul></nav>';
      }

      ※ ‘login-page’ はログインページのスラッグ名。

    3. 子テーマの functions.php に、onepress_site_header() を追加(親テーマの /inc/template-tags.php の onepress_site_header() をコピー)する。
    4. onepress_site_header() を変更する。
      <a href="#0" id="nav-toggle"><?php _e( 'Menu', 'onepress' ); ?><span></span></a>
      <nav id="site-navigation" class="main-navigation" role="navigation">

      <a href="#0" id="nav-toggle"><?php _e( 'Menu', 'onepress' ); ?><span></span></a>
      <?php my_login_button(); ?>
      <nav id="site-navigation" class="main-navigation" role="navigation">
    5. 追加したボタンのスタイルを style.css またはカスタマイズの 追加 CSS に追加する。
      スタイルの例:

      #site-navigation-button ul.onepress-button,
      #site-navigation-button ul.onepress-button * {
      	margin: 0;
      	padding: 0;
      	list-style: none;
      	text-decoration: none;
      }
      #site-navigation-button ul.onepress-button {
      	float: right;
      	margin-left: 15px;
      }
      #site-navigation-button ul.onepress-button > li {
        float: left;
      }
      #site-navigation-button ul.onepress-button li a {
      	display: inline;
      	margin: 0 10px;
      	padding: 10px 15px;
      	font-weight: 600;
      	color: #fff;
      	background: #03c4eb;
      	border-radius: 2px;
      }
      #site-navigation-button ul.onepress-button li a:hover {
      	opacity: 0.8;
      }
    CG

    (@du-bist-der-lenz)

    プラグイン「easy degital download」「simple membership」も試していませんが、テーマ「onepress」のグローバルメニューで「ログイン後にログアウトの表示に変更することが」問題なく出来ました。
    https://skd.fm-woodstock.com/
    参考にしたいと示されているサイトでは、同プラグインを利用していますか。

    ishitaka

    (@ishitaka)

    メインメニューに追加する方法もいいかもしれません。
    (メニューに追加するのでモバイル時にはドロップダウンになってしまいますが・・・)

    下記コードを functions.php に追加すると、メインメニューの最後にログイン/ログアウトのメニュー項目が追加されます。

    add_filter( 'wp_nav_menu_items', function ( $items, $args ) {
    	if ( $args->theme_location == 'primary' ) {
    		if ( is_user_logged_in() ) {
    			$label = 'ログアウト';
    			$link = wp_logout_url( get_the_permalink() );
    		} else {
    			$label = 'ログイン';
    			$link = get_permalink( get_page_by_path( 'login-page' )->ID );
    		}
    		$items .= '<li class="right"><a href="' . esc_url( $link ) . '">' . $label . '</a></li>';
    	}
    	return $items;
    }, 10, 2 );
    ishitaka

    (@ishitaka)

    Login Logout Register Menu プラグインを使用するのもいいかです。

    mituru0622

    (@mituru0622)

    CGさま
    ishitakaさま

    ありがとうございます!返信が大変遅くなりまして申し訳ございません。

    ishitaka様に提案していただいた方法(ログインボタンの設置)とCG様、ishitaka様に提案していただいた方法(メニューをログイン/ログアウト表示にする)の両方を試しました。
    メニューをログイン、ログアウト表記に変えることにしました。
    お二人ともありがとうございます!!

    また、新たな悩みが出てきたので、ご相談に乗っていただければと思います。
    (使い方全般にアップしました)
    もしお時間ありましたらまたご教授いただけると幸いです。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。