Top Bar Menü wie de.wordpress.com

JayT85

Hallo,

ich suche ein Plugin oder eine Lösung wie ich ein Menü oberhalb der Seite einfügen kann.

Genau genommen sollte das Menü auch nur als Login Form dienen und außer einen Login/Logout/Register keinerlei möglichkeiten bieten.

Hat jemand eine Idee?

Folgende Lösungen habe ich bereits ausprobiert. Allerdings waren diese nicht wie gewünscht:

- Sliding Login Panel with jQuery 1.3.2
- Sliding Panel plugin
- WP Sliding Login/Dashboard Panel

Im Grunde würde mir eine css Anpassung mit Login Form bereits genügen. Wenn mir hier jemand behilflich sein könnte. Aber auch eine Plugin oder ganz andere Lösung sind Willkommen!

Danke!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

geloeschterbenutzer20101124

style.css ergänzen um:

HTML

/* menu
----------------------------------------------- */


#menu { 	
  font-size: 10px;
  font-weight: normal;
  }


#menu #current {
  background: url(gradient_hover.png) repeat-x bottom;
  padding-left: 12px;
  padding-right: 12px;
  border-left: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  }


#menu #last a { margin-right: 0; }


#menu a {
  float: left;
  color: #666666;
  padding-top: 4px;
  height: 18px;
  padding-left: 12px;
  padding-right: 12px;
  text-decoration: none;
  font-size: 10px;
  }




#menu a:hover {
  background: url(gradient_hover.png) repeat-x bottom;
  padding-left: 11px;
  padding-right: 11px;
  border-left: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  }




#menu li { display: inline; margin: 0; text-align: center; }
#menu ul { list-style: none; margin: 0; padding: 0; text-transform: uppercase; }

Alles anzeigen

Bilder runterladen, in das Verzeichnis von style.css hochladen. In header.php oder so das eingeben, was Du innerhalb des Menü's sehen willst, und mit der id="menu" versehen. Du kannst es Dir noch einfacher machen, wenn Du solch ein Formular nutzt.

Abgesehen davon aber, finde ich sowas cooler: Mootools Login.

LG saleen7

JayT85

Danke!

Das hat mir schon einmal geholfen.

Der Link zum Mootools Login is auch interessant. Ich würde mich, so wie es aussieht, aber doch für die andere Variante entscheiden.

Hier ist jetzt nur noch die Frage wie ich ein Formular einbinden kann und welches auch funktioniert und nur angezeigt wird, wenn User nicht eingeloggt ist. Dann ebenfalls ein Registrierungslink.

Wenn der User angemeldet ist ein Link zum ausloggen sowie eine kurze Mitteilung: Hallo User XYZ!

Nen Großteil kann ich da jawohl mit dem Wordpress Codex machen...

geloeschterbenutzer20101124

Wordpress Codex ist es ja nicht. Eher php : )

Aber ist sowas, was Du willst, nicht bereits im Standard default Theme schon in der Sidebar? Kannst Du doch übernehmen?

Das hier kommt nur, wenn man nicht eingeloggt ist:
<?php wp_register(); ?>

Und das hier ist zum Anmelden und Ausloggen gleichzeitig.
<?php wp_loginout(); ?>

Wenn Du dies dennoch individuell gestalten willst kannst Du hier vorbeischauen: is_user_logged_in
[COLOR=#000000][COLOR=#0000BB]

PHP

<?php
if ( is_user_logged_in() ) {
    echo 'Welcome, registered user!';
} else {
    echo 'Welcome, visitor!';
};
?>

[/COLOR][/COLOR]
LG saleen7

JayT85

So nun habe ich folgendes in die header.php eingefügt:

PHP

<div id="topmenu">
<p align=right>
<?php if (is_user_logged_in()) { ?> 
<?php global $current_user;
      get_currentuserinfo();
echo 'Hallo ' . $current_user->user_login . "\n";
?>
! Was willst Du machen? | <?php wp_loginout(get_permalink() ); ?> | 
<?php } ?>
<?php if (!is_user_logged_in()) { ?> 
Hallo Gast! Was willst Du machen? | <a href="http://www.enniger-aktuell.de/registrieren/">Registrieren</a> | <a href="<?php echo wp_lostpassword_url( get_permalink() ); ?>" title="Lost Password">Passwort vergessen?</a> | Einloggen: 
<form name="loginform" id="menulogin" action="<?php bloginfo('wpurl'); ?>/wp-login.php?redirect_to=" method="post">
  <label><?php _e('username') ?> <input type="text" name="log" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="10" tabindex="1" /></label>
  <label><?php _e('password') ?> <input type="password" name="pwd" value="" size="10" tabindex="2" /></label>
  <?php do_action('login_form'); ?>
  <input type="submit" name="wp-submit" value="<?php _e('log in'); ?>" tabindex="3" />
  <input type="hidden" name="redirect_to" value="<?php echo attribute_escape($_SERVER['REQUEST_URI']); ?>" />
 </form>
<?php } ?>
</p>
</div>

Alles anzeigen

Soweit ist das auch alles so wie ich es haben will. Die Codeschnippsel habe ich mir dank einer großen Suchmaschine zusammengesucht. Deswegen ist das wohl alles nicht so fein gecodet. Vielleicht mag es ja wer umstellen! :D

Jedenfalls hakt es jetzt noch daran, dass ich jeweils zurück zur aktuellen Seite geleitet werde (get_permalink). Dies funktioniert nur beim Login nicht.

Außerdem sollte das Login Formular auf gleicher Höhe wie der Text "Hallo Gast!... stehen. Ein "Passwort merken" Haken wäre auch nicht schlecht!"

EDIT

Den Passwort merken Haken habe ich nun mit folgendem Code hinzugefügt:

PHP

<label for="rememberme"><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Passwort merken</label>

Funktioniert der so auch? Oder wird er nur angezeigt?

Bleibt also neben der Frage nur noch die Weiterleitung und die Anzeige in einer Zeile! ;)

geloeschterbenutzer20101124

Bin heute nur kurz online. Aber was meinst Du genau? Was sollte in eine Zeile? Ich schaue mir das mal genauer an. Hast Du eine Beispielseite, die ich mir anschauen kann?

JayT85

Guten Morgen,

auf http://www.enniger-aktuell.de/about/ kannst Du es sehen.

Wenn man ausgeloggt ist steht dort: "Hallo Gast! Was willst Du machen?" und dann in einer neuen Zeile kommen die Login Felder. dese sollten jedoch in der gleichen Zeile erscheinen...

Die Weiterleitung und ob der Passwort merken Haken funktioniert konnte ich auch nicht lösen...

geloeschterbenutzer20101124

JayT,

suche in Deinen css nach "#menulogin". Wenn diese noch nicht definiert ist, kannst Du ihr Attribute zuweisen. Was das Passwort merken betrifft, lasse es doch am besten einfach weg. Denn der User kann über seinen Broswer selbst bestimmen, ob und wie lange die Sitzung gespeichert wird (Cache) und ob Passwörter gespeichert werden.

Mit dem Weiterleitungslink weiß ich leider nicht weiter.

LG saleen7

mfitzen

Ich frage mich warum hier auf mootools verwiesen wird, wenn das Gleiche doch auch mit jQuery realisierbar ist. Der Vorteil: jQuery ist in WordPress enthalten und somit entfällt das Einbinden eines zusätzlichen Scriptes.

http://web-kreation.com/index.php/tuto…lt-with-jquery/

JayT85

TtributeAttribute muss ich dem topmenu denn zuweisen?

geloeschterbenutzer20101124

JayT85,

auf die Schnelle sehe ich in Deinem Code folgendes (verkürzt):

HTML

<div id="topmenu">
<p align=right>
Hallo Gast! Was willst Du machen? | 
<a href="#">Registrieren</a> | 
<a href="#" title="Lost Password">Passwort vergessen?</a> | 


Einloggen:
<form>blub blub </form>
</p>
</div>

Alles anzeigen

Was ist, wenn Du folgendes daraus machst?

HTML

<div id="topmenu">
<p align="left">
Hallo Gast! Was willst Du machen? | 
<a href="#">Registrieren</a> | 
<a href="#" title="Lost Password">Passwort vergessen?</a> | 
</p>
<p align="right">
Einloggen:
<form>blub blub </form>
</p>
</div>

Alles anzeigen

Das ist natürlich keine schöne, aber erstmal eine schnelle und einfache Veränderung. Wenn der Vorschlag klappt, könntest Du später anstatt <p align="Attribut"></p> <div class="registry_links"></div> Tags o.ä. nutzen und diese in Deine style.css mit
.registry_link {float:left;}

o.ö, auslagern. Das wäre dann besser.

LG

Edit:

infected: mir sind beide Slide.Login Varianten angenehm. Welche davon vorteilhafter als die andere ist, erkenne ich nicht.

JayT85

Also ich habe es jetzt erstmal wie folgt gelöst:

PHP

<div id="header"><div class="wrap_center">
 <h1><a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('name'); ?> home page"><?php bloginfo('name'); ;?></a></h1>
<div id="top_login">
<?php if (is_user_logged_in()) { ?> 
<?php global $current_user;
      get_currentuserinfo();
echo 'Hallo ' . $current_user->user_login . "\n";
?>
! Was willst Du machen? | <?php wp_loginout(get_permalink() ); ?> | 
<?php } ?>
<?php if (!is_user_logged_in()) { ?> 
<form name="loginform" id="menulogin" action="<?php bloginfo('wpurl'); ?>/wp-login.php" method="post">
  <label><?php _e('username') ?> <input type="text" name="log" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="10" tabindex="1" /></label>
  <label><?php _e('password') ?> <input type="password" name="pwd" value="" size="10" tabindex="2" /></label>
  <?php do_action('login_form'); ?>
  <input type="submit" name="wp-submit" value="<?php _e('log in'); ?>" tabindex="3" />
  <input type="hidden" name="redirect_to" value="<?php echo attribute_escape($_SERVER['REQUEST_URI']); ?>main" />
 </form>
<?php } ?>
</div> 
</div>
</div>

Alles anzeigen

Hier die passenden Einträge in der style.css

PHP

#top_login {
         float: right;
}
#top_login a{
 text-decoration: underline;
 color: #ffffff;
}
#top_login a:hover{
 text-decoration: underline;
 color: #000000;
}

Alles anzeigen

PHP

#header{
 background: #a70505 url(images/bg_header.gif) repeat-x;
}
#header h1{
 padding: 20px 0;
 font-size: 24px;
 color: #fff;
}
#header h1 a{
 text-decoration: none;
 color: #fff;
}
#header h1 a:hover{
 text-decoration: underline;
}

Alles anzeigen

PHP

.wrap_center{
 margin: 0 auto;
 width: 980px;
}

Mit dieser Lösung kann ich erstmal soweit leben! :) Danke! :)

geloeschterbenutzer20101124

Super : )

Aber, wieso hast Du jetzt zwei Login-Formulare?

LG

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Top Bar Menü wie de.wordpress.com

Jetzt mitmachen!