Wordpress eigenes CSS Design ändern

VsteckdoseV · 14. November 2013

Hallo,

ich bin absoluter Neuling was so etwas angeht. Ich soll von einer Wordpress Homepage die Menüpunkte und die Verlinkungen ändern. Wir nutzen ein selbstgeschriebenes Design in dem es nicht möglich ist unter "Designs" neue Menüpunkte zu ändern und hinzuzufügen.

Wenn ich zb eine neue Seite erstelle dann erscheint die logischerweise nicht als Menü sondern ist nur unter dem von mir festlelegten Link oder halt als News in dem Blog abrufbar.

Unter "Designs" haben wir 3 Unterpunkte, nämlich "Themes", "Anpassen" und "Editor". In dem Editor habe ich dann auch die entsprechenden Zeilen gefunden, die anscheinend die Reiter im Menü definieren. Die sehen folgendermaßen aus:

/*stiftung*/
#sti a { background: url("images/stiftung_nav.gif") 0 0 no-repeat; display:block; width:103px; }
#sti a:hover { background-position: -103px 0; display:block; }
#sti a:active, body.page-id-7 #sti a { background-position: -206px 0; }
/*stiftungszweck*/
#stizwe a { background: url("images/stizwe_nav.gif") 0 0 no-repeat; display:block; width:165px; }
#stizwe a:hover { background-position: -165px 0; display:block; }
#stizwe a:active, body.page-id-89 #stizwe a { background-position: -330px 0; }
/*projekte*/
#pro a { background: url("images/pro_nav.gif") 0 0 no-repeat; display:block; width:106px }
#pro a:hover { background-position: -106px 0; display:block; }
#pro a:active, body.page-id-10 #pro a { background-position: -212px 0; }
/*presse*/
#pre a { background: url("images/pre_nav.gif") 0 0 no-repeat; display:block; width:88px; }
#pre a:hover { background-position: -88px 0; display:block; }
#pre a:active, body.page-id-28 #pre a { background-position: -176px 0; }

Ich habe da mal ein bisschen herumprobiert und einfach mal den Satz
/*stiftung*/
#sti a { background: url("images/stiftung_nav.gif") 0 0 no-repeat; display:block; width:103px; }
#sti a:hover { background-position: -103px 0; display:block; }
#sti a:active, body.page-id-7 #sti a { background-position: -206px 0; }

per copy and paste einfach unten drangehängt in der Hoffnung dass ich den Reiter "Stiftung" doppelt habe. Hat aber nicht funktioniert.

So wie ich das sehe muss ich erstmal 2 Baustellen: Einmal das CSS-Gerüst und dann Wortpress, wo ich inhaltlich und Designmäßig visualisieren kann.

Kann mir jemand weiterhelfen? Wie gesagt ich möchte die Menüpunkte umbenennen und die Inhalte neu verteilen bzw neu verlinken.

Danke!!!

ampash · 14. November 2013

Hallo "VsteckdoseV",

den Teil den du gepostet hast ist für "Position" und "Optik" aber nicht für den Inhalt zuständig.
Du müsstest den Menü-Teil im html suchen und ändern.
zB. in der index.html einen Punkt finden der mit <div id="navi"> beginnt. Da wären dann die dargestellten Menüpunkte zu finden. und zu editieren.

Handelt es sich um ein Menü mit Untermenüs oder um eine einfache Ebene?

Ein Beispiel für eine einfache Ebene wäre:

<div id="navi">
<ul>
<li>
<a href="index.html">Startseite</a>
</li>
<li>
<a href="seiteeins.html">Seite eins</a>
</li>
<li>
<a href="service.html">Service</a>
</li>
<li>
<a href="kontakt.html">Kontakt</a>
</li>
<li>
<a href="anfahrt.html">Anfahrt</a>
</li>
<li>
<a href="impressum.html">Impressum</a>
</li>
</ul>
</div>

wenn du jetzt einen Menüpunkt hinzufügen willst musst du den folgen teil kopieren und an der gewünschten Stelle einfügen:

<li>
<a href="index.html">Startseite</a>
</li>

Wenn das Menü dann fertig ist müsstest du den Menüteil nehmen und in alle .html Seiten einfügen.

Das jetzt mal die „Übergangslösung“ da ich ja nichts von deinen Erfahrungen weiß und welche Tools du benutzt.

MfG Micha

DukePanic · 14. November 2013

Mal ne Frage, wieso bekommst du als Neuling die Aufgabe etwas am Dessin zu andern? Ich verstehe das immer nicht. Verstehe mich nicht falsch, aber die Leute die sich mit etwas brüsten, dass Sie nicht können, geschieht es nicht anders als das Sie auf die Schnauze fallen.

Wenn mein Chef, Bruder , Bekannter kommt und sagt ich brauch ein 5 Gänge Menü, dann sag ich nicht, dass ich das kann,weil ich ab und zu Spaghetti Bolognese Koche.

Ich erlebe so etwas oft im Bekanntenkreis. Einer möchte was machen, der angebliche PC Profi (den es in jedem Bekanntenkreis gibt) behauptet dann nach 3 Bier er kann das alles und im Endeffekt richtet es dann die Comunity und der Profi schmückt sich dann mit fremden Loorbeeren.

VsteckdoseV · 14. November 2013

ampash schrieb:
Handelt es sich um ein Menü mit Untermenüs oder um eine einfache Ebene?

wenn du jetzt einen Menüpunkt hinzufügen willst musst du den folgen teil kopieren und an der gewünschten Stelle einfügen:

<li>
<a href="index.html">Startseite</a>
</li>

Wenn das Menü dann fertig ist müsstest du den Menüteil nehmen und in alle .html Seiten einfügen.

MfG Micha

Cool, Danke dir Micha, das hat mir schonmal weitergeholfen. Zu deinem Post:

Es soll ein Menü mit Unterpunkten sein.

Was ich nicht verstehe: deine Zeile
<li>
<a href="index.html">Startseite</a>
</li>

ist "Index" die Art von Menü und "Startseite" dann das worauf ich klicke? Sry für diese absoluten Anfängerfragen, habe sowas noch nie gemacht

Ergänzung (14. November 2013)

DukePanic schrieb:
Mal ne Frage, wieso bekommst du als Neuling die Aufgabe etwas am Dessin zu andern? Ich verstehe das immer nicht. Verstehe mich nicht falsch, aber die Leute die sich mit etwas brüsten, dass Sie nicht können, geschieht es nicht anders als das Sie auf die Schnauze fallen.

Wenn mein Chef, Bruder , Bekannter kommt und sagt ich brauch ein 5 Gänge Menü, dann sag ich nicht, dass ich das kann,weil ich ab und zu Spaghetti Bolognese Koche.

Ich erlebe so etwas oft im Bekanntenkreis. Einer möchte was machen, der angebliche PC Profi (den es in jedem Bekanntenkreis gibt) behauptet dann nach 3 Bier er kann das alles und im Endeffekt richtet es dann die Comunity und der Profi schmückt sich dann mit fremden Loorbeeren.

Kann dich da verstehen. Der der mir die Aufgabe gab hat keine Ahnung von Homepages und Internet

Ich wurde gefragt ob ich da an Wordpress was ändern kann und ich dachte das bekomme ich hin. Ich dachte ich schau mir das mal an und wenn es zu komplex wird muss ich die Aufgabe halt einfach abgeben. Es ist also nicht so dass ich mit Fähigkeiten geprahlt hätte die ich nicht habe.

Mit fremden Lorbeeren schmücken würde ich mich auch nicht. Ich meine es ist ja wohl jedem klar dass jemand, der soetwas noch nie gemacht hat Hilfe hatte wenn es ihm gelingt

?

Ich habe diese Aufgabe bekommen und dachte das wäre easy weil ich schon mit Wordpress gearbeitet habe, mit vorgefertigten Designs. Als ich heute morgen herausgefunden habe dass wir ein Custom Design haben hat mich das interessiert und ich wollte dem auf den Grund gehen

ampash · 14. November 2013

"index.html" ist die Datei die beim klicken auf Startseite aufgerufen wird, wobei "Startseite" der Menüpunkt ist der auf der Seite zu sehen ist.

Nebenbei noch bisserl Doku zum einlesen in HTML und CSS: klick
WordPress Infos zum einbinden von Layouts (Themes) klick und klick

DukePanic · 14. November 2013

Ok

Wollte dich nicht angehen, aber es gibt hier einfach oft solche Fälle und da reagiere ich ein wenig gereizt

Umbel · 14. November 2013

Ein CMS im Design um seine Fähigkeiten zubescheiden Menüs zu bauen ist aber auch ne selten blöde Idee. Wo kommt den dieses Custom-Design her? Kannst du mal nen Link zu der Seite posten, dann kann man dir vlt eher helfen wo es was zu sehen geben muss.

Daaron · 14. November 2013

Also kurz und knapp zusammengefasst eine Folge von Fehlern:
- jemand hielt WP für eine gute Idee...
- jemand (derselbe?) hat ein eigenes Template gefrickelt, dass eine der Kernfunktionen eines CMS, die Navigationsverwaltung, zerballert
- der TE soll/will ohne jegliche Kenntnisse im Web-Bereich jetzt die Fehler seines/r Vorgänger(s) ausbügeln

Wenn ich all diese Punkte weiterdenke dann endet es mit großer Sicherheit damit, dass da ne uralte WP-Version läuft, die vor Sicherheitslücken nur so strotzt... und wenn es nicht das WP selbst ist, dann ist es das Frickel-Template.

Hier sollte definitiv ein Auftrag an echte Profis rausgehen. Kostet zwar ne Stange, dafür wirds dann auch was.

VsteckdoseV · 14. November 2013

Meine Frage ist einfach ob ich das Menü auf die Schnelle ändern kann oder ob ich dafür alles umschreiben muss (was ich nicht kann und wofür ich nen Kurs besuchen müsste).

Hier mal ein Auszug wie das auf der "Theme bearbeiten" Seite bei Wordpress aussieht:

Templates
404-Template
(404.php)
Fußzeile
(footer.php)
Theme-Funktionen
(functions.php)
Kopfzeile
(header.php)
Hauptindex-Template
(index.php)
Links Seitentemplate
(links.php)
Seiten-Template
(page.php)
Sidebar
(sidebar.php)
testy Seitentemplate
(testy.php)

Stylesheets
Stylesheet
(style.css)

Wenn ihr mir sagt wo ich was zu ändern habe (Es geht nur darum die Menüpunkte zu ändern und keinen neuen Inhalt oder neues Design einzufügen) kann ich den HTML Code hier posten und ihr könnt mir Tipps geben?

Die Homepage wurde professionell entwickelt und steht schon seit ein paar Jahren. Der Mangel daran ist dass es nur statische Menüpunkte gibt und man selber in Wordpress nichts ändern kann. Das kann und möchte ich auch nicht ändern. Ich möchte lediglich die Menüpunkte umbenennen und ergänzen und die Inhalte neu aufteilen.

Daaron · 14. November 2013

Im Zweifel ist es nicht nur HTML-Code, sondern PHP mit ner Iteration über eine Datenbank.

VsteckdoseV · 14. November 2013

Das "Index.php" sieht beispielsweise so aus:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<div id="content" class="narrowcolumn" role="main">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<div style="font-size:10pt; padding-bottom:7px"><?php the_time('F j, Y'); ?></div>

<h3><?php the_title(); ?></h3>

<div class="entry">
<?php the_content(__('Read the rest of this entry »')); ?>
</div>
<div class="metadata"></div>
</div>

<?php endwhile; ?>

<div class="navigation_blog">
<div class="alignleft"><?php next_posts_link(__('« Older Entries')) ?></div>
<div class="alignright"><?php previous_posts_link(__('Newer Entries »')) ?></div>
</div>

<?php else : ?>

<h2 class="center"><?php _e('Not Found'); ?></h2>
<p class="center"><?php _e('Entschuldigen Sie bitte, aber was Sie suchen scheint nicht hier zu sein.'); ?></p>
<?php get_search_form(); ?>

<?php endif; ?>

</div>

<?php get_footer(); ?>

Speedy. · 14. November 2013

Schmerzen...
Wenn die Menüpunkte fix in das Theme einprogrammiert wurden, dann musst du dies in der header.php ändern.

Aber: jedes vernünftige WordPress-Theme bietet die Möglichkeit, die Menüstruktur anzupassen. Dazu werden in der functions.php lediglich 4 Zeilen Code benötigt:

Code:

function register_my_menu() {
  register_nav_menu(main-nav',__( 'Main Navigation'));
}
add_action( 'init', 'register_my_menu' );

Das ist übrigens nur ein Beispiel. Ich empfehle dir, dich in diesen Artikel einzulesen: http://codex.wordpress.org/Navigation_Menus

Es mag auf den ersten Blick viel Aufwand sein, dass zu ändern, du wirst aber später froh drum sein.

VsteckdoseV · 14. November 2013

OK.

Hier mal die functions.php:

<?php if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'start_post_rel_link', 10, 0);
remove_action('wp_head', 'parent_post_rel_link', 10, 0);
remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);

function blog_favicon() {
echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('stylesheet_directory').'/images/favicon.ico" />';
}
add_action('wp_head', 'blog_favicon');

function admin_favicon() {
echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('stylesheet_directory').'/images/favicon.ico" />';
}
add_action('admin_head', 'admin_favicon'); ?>

und hier die header.php:

<?php ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php wp_title('»', true, 'left'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<style type="text/css" media="screen">
</style>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page">
<div id="fixhead"> 
<div id="header">
<a href="<?php echo get_option('home'); ?>/">
<img id="title_font" src="<?php bloginfo('template_directory'); ?>/images/header_logo_24.png" />
</a>
<div id="fixlogin"><?php wp_loginout(); ?> | <a href="<?php echo get_option('home'); ?>/?page_id=74">Impressum</a></div>
</div>

<hr />

Kann mir jemand sagen ob das jetzt fixe Menüpunkte sind und wie ich die verändern kann?

Was mich irritiert: Nirgendwo kann ich die Menüreiter herauslesen (Die da sind Stiftung, Stiftungszweck, Presse, Projekte) und diese ggf ändern. In der von Speedy geposteten Anleitung steht wie ich die Funktion eines Menüs hinzufügen kann. Das klingt erstmal gut. Fast schon zu einfach. Ich füge einfach die entsprechenden Zeilen

function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' ); (in die functions.php)

und

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?> (in die header.php)

hinzu und schon kann ich im Dashboard ein Menü erstellen?

Speedy. · 14. November 2013

Richtig. Wenn du diese Codeschnipsel an den richtigen Stellen einfügst, kannst du das Menü über das Backend selbst verwalten. Aber du solltest Grundkenntnisse in HTML und CSS mitbringen, denn je nachdem wie du es machst muss das CSS angepasst werden. Übrigens kannst du wp_nav_menu() noch einige Parameter mitgeben, etwa ob ein Container um die Navigation erstellt werden soll und welche Class dieser haben soll.

http://codex.wordpress.org/Function_Reference/wp_nav_menu

VsteckdoseV · 14. November 2013

ok. und wenn ich das fixe menü beibehalten und einfach die punkte umbenennen möchte mache ich das im css oder in einer dieser php dateien? habe die menünamen bisher nämlich nur im css gelesen

Demon0no · 14. November 2013

Wie bereits jemand oben sagte, im CSS (Cascading Style Sheet) ist NUR das Styling beschrieben KEIN Inhalt.
Da das Menü nicht in der header.php oder der index.php steht, könntest du ja vielleicht noch in die sidebar.php gucken. Die wird vom WP auch inkludiert laut der index.php.

€: P.S.: Halte Ausschau nach dem Codeschnipsel:

id="sti"

Wenn ich das richtig verstehe, sind die Buttons nicht selber beschriftet, sondern einfach nur divs/spans/whatever mit einem Bild als Hintergrund(?)

Speedy. · 14. November 2013

Wenn dann sollten die Menüpunkte in einer der PHP-Dateien auftauchen. Allerdings finde ich in deinen Codeschnipseln recht wenig dazu.

VsteckdoseV · 14. November 2013

Dies ist die Homepage: http://www.stiftungfriedensbewegung.de/

Die Menüpunkte sind also schon beschriftet

In der Sidebar scheint das tatsächlich zu sein:

<div id="sidebar">
<div id="navigation">
<div class="outer" id="sti">
<a href="<?php bloginfo('wpurl'); ?>?page_id=7"><span></span></a>
</div>
<div class="outer" id="stizwe">
<a href="<?php bloginfo('wpurl'); ?>?page_id=89"><span></span></a>
</div>
<div class="outer" id="pro">
<a href="<?php bloginfo('wpurl'); ?>?page_id=10"><span></span></a>
</div>
<div class="outer" id="pre">
<a href="<?php bloginfo('wpurl'); ?>?page_id=28"><span></span></a>
</div>
<div id="alpha_slide"></div>
</div>
</div> 
</div>
<div id="fixed_box">
<h2>Stiftung<br />
Friedensbildung</h2>
<br />
<strong>Vorstand:</strong><br />
<a href="?attachment_id=128">Dr. Peter Becker</a><br />
<a href="?attachment_id=170">Reiner Braun</a><br />
<br />
<strong>Beirat:</strong>

<div id="sidebar-beirat">
<a href="?attachment_id=169">Dr. Angelika Claussen, IPPNW</a>
<a href="?attachment_id=207">Dr. Tilman Evers, ZFD</a>
<a href="?attachment_id=505">Dr. Ute Finckh-Krämer, MdB</a>
<a href="?attachment_id=229">Otto Herz, Reformpädagoge</a>
<a href="?attachment_id=167">Dr. Dr. hc. Jürgen Lüthje</a>
<a href="?attachment_id=175">Winfried Nachtwei, MdB a. D.</a>
<a href="?attachment_id=211">Prof. Dr. Herbert Wulf</a>

<br />
<strong>Geschäftsführung:</strong><br />
<a href="?attachment_id=506">Jenny Louise Becker, M.A.</a>
<br />
<strong>Team:</strong>
<a href="?attachment_id=176">Constanze Bade, M.A.</a>
<a href="?attachment_id=532">Jenny Jörgensen, B.A.</a>
<a href="?attachment_id=503">Peter Paulini B.A.</a>
<a href="?attachment_id=504">Sebastian Scheithauer</a>
</div>

</div>

bloß ist hier halt von "sti" und "stifzwe" ... die rede, ich nehme an dass ich dann im css die entsprechenden einträge ändern müsste da sie dort ausformuliert sind (siehe 1. Post von mir)?

Demon0no · 14. November 2013

Wie ich es mir dachte, das Menü ist in der sidebar.php und die Beschriftungen im Menü sind Bilder.
Ohne das Editieren der Bilder, wirst du sie nicht umbenennen können.
Die verlinkungen kannst du ändern, indem du in der sidebar.php die Links anpasst.

<div class="outer" id="sti">
<a href="http://www.friedensbildung.org?page_id=7"><span></span></a>
</div>
<div class="outer" id="stizwe">
<a href="http://www.friedensbildung.org?page_id=89"><span></span></a>
</div>
<div class="outer" id="pro">
<a href="http://www.friedensbildung.org?page_id=10"><span></span></a>
</div>
<div class="outer" id="pre">
<a href="http://www.friedensbildung.org?page_id=28"><span></span></a>
</div>

Demon0no · 14. November 2013

Die Texte auf dem Menü sind mit Bildern realisiert. Ohne diese zu editieren wirst du den Text darauf nicht ändern können.

€:
images/stiftung_nav.gif
images/stizwe_nav.gif
images/pro_nav.gif
images/pre_nav.gif

Sind die Bilder die Editiert werden müssen.

Wordpress eigenes CSS Design ändern

Commander

Cadet 3rd Year

Lieutenant

Commander

Cadet 3rd Year

Lieutenant

Lt. Commander

Fleet Admiral

Commander

Fleet Admiral

Commander

Speedy.

Gast

Commander

Speedy.

Gast

Commander

Ensign

Speedy.

Gast

Commander

Ensign

Ensign

Ähnliche Themen