15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)
  • Leuke site..

    Gewoon een soort buttons (icons) met een linkje naar de Social media pagina?
    Dat is vrij simpel.

    Deze code moet je dan ergens in je header.php bestand plakken.

    <a class="twitter-icon" href="http://twitter.com" title="Mijn Twitter profiel"><img src="http://jouw-domein.nl/path/naar/het/plaatje.png" alt="Twitter" /></a>
    <a class="facebook-icon" href="http://facebook.com" title="Mijn Facebook pagina"><img src="http://jouw-domein.nl/path/naar/het/plaatje.png" alt="Facebook" /></a>

    Natuurlijk wel nog even aanpassen naar jouw Twitter-/Facebook url en de url waar het Twitter plaatje (icon) staat op de hosting.

    Ik zou de code plaatsen in het header.php bestand precies voor deze code.

    … hier dus…
    <div class="clear"></div>

    Mochten de icons nog niet helemaal netjes gepassioneerd staan dan geef even een gil dan zetten we dit recht met behulp van de CSS.

    Thread starter Ilovebooks

    (@ilovebooks)

    Dag Shmoo,

    Dankjewel!Was idd vrij simpel om te doen. Maar de locatie is nog niet naar wens. Deze code <div class=”clear”></div>
    zie ik niet. Ik heb de FB&twitter code boven

    <div id=”botmenu” class=”clearfix”>

    en vervolgens boven
    <div id=”head” class=”clearfix”>

    geplakt, maar zonder gewenst resultaat. Het liefst wil ik dat de fb en twitter icoontjes rechtsboven het horizontale menu komen (of rechts in het menu, als dat makkelijker is). Weet jij hoe ik dat kan fixen?

    Dan moet je de codes onder het Search gedeelte plaatsen en dus precies voor deze regel.

    … hier ...
    <!--end masthead-->

    Dan zullen ze onder de search en boven het menu uitkomen.

    Maar schrik niet als ze links uitgelijnd zijn want dat moeten we in de CSS regelen.
    Via het bestand stylesheet (style.css) moeten we straks ook nog wat code toevoegen.

    Thread starter Ilovebooks

    (@ilovebooks)

    Done! Thanks. Ik ben klaar voor de volgende stap, de locatie (buttons zijn eigenwijs en staan nu links) is nog niet ideaal 😉

    Is er geen mogelijkheid om hem boven de CLEAR te plaatsen en onder de Search?

    Kijk hier.
    http://i45.tinypic.com/2e54ftv.png

    Thread starter Ilovebooks

    (@ilovebooks)

    Hmm, de code van mijn header php ziet er anders uit:

    `</head>

    <body <?php body_class(); ?>>

    <div id=”wrapper”> <!– wrapper begin –>

    <div id=”masthead”><!– masthead begin –>
    <div id=”head” class=”clearfix”>
    <div id=”blogname”>
    <?php $mylogo = get_option(‘uree_logo’); ?>
    <h1 class=”logo”><a href=”<?php bloginfo(‘siteurl’);?>/” title=”<?php bloginfo(‘name’);?>”><img src=”<?php echo $mylogo ?>” alt=”<?php bloginfo(‘name’);?>”/></a></h1>
    </div>
    <?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
    <a class=”twitter-icon” href=”http://twitter.com&#8221; title=”Mijn Twitter profiel”><img src=”http://inspiratieplank.nl/wp-content/uploads/2012/08/twitter.png&#8221; alt=”Twitter” /></a>
    <a class=”facebook-icon” href=”http://facebook.com&#8221; title=”Mijn Facebook pagina”><img src=”http://inspiratieplank.nl/wp-content/uploads/2012/08/facebook.png&#8221; alt=”Facebook” /></a>
    </div><!–end masthead–>
    <div id=”botmenu” class=”clearfix”>

    <?php wp_nav_menu( array( ‘container_id’ => ‘submenu’, ’theme_location’ => ‘primary’,’menu_class’=>’sfmenu’,’fallback_cb’=> ‘fallbackmenu’ ) ); ?>
    </div>

    Thread starter Ilovebooks

    (@ilovebooks)

    Sorry, is waarschijnlijk niet echt handig, al die code

    Nee het is prima..

    Weet jij hoe FTP werkt?
    Weet je hoe je met FTP moet inloggen op je hosting om in de Thema folder te komen van WordPress ?

    Als je weet hoe dat werkt dan ga via FTP naar je Thema folder en zoek het bestand searchfrom.php dupliceer dit bestand en noem de kopie van het origineel searchform-header.php.

    Als het goed is heb je nu twee bestanden.
    searchform.php
    searchform-header.php

    Dan open je searchform-header.php en zal je in dit bestand wel de CLEAR code vinden en kun je daar jouw Social Media codes plaatsen op de juiste plek.

    Dat Sla je op en dan ga je weer naar het bestand header.php en pas je de volgende regel aan.

    <?php include (TEMPLATEPATH . '/searchform.php'); ?>

    naar:

    <?php include (TEMPLATEPATH . '/searchform-header.php'); ?>

    Dat opslaan en als het goed is staan de icons dan op de juiste plek en hoeven we ze alleen nog maar rechts uit te lijnen via CSS.

    Thread starter Ilovebooks

    (@ilovebooks)

    Yep, dat weet ik, en weet Style.css te vinden: kleuren en padding e.d. aanpassen lukt ook, maar locatie van buttons veranderen nog niet. Ik weet niet waar/ hoe ik dat kan doen

    Voor de icons (buttons) uit te lijnen moet je een stukje nieuwe code toevoegen aan je CSS (style.css)

    Namelijk:

    .twitter-icon, .facebook-icon {
         float: right;
    }

    Om te beginnen, daarna zal het nog wat padding en margins nodig hebben.

    Thread starter Ilovebooks

    (@ilovebooks)

    Hoi, ik heb geprobeerd te doen wat je schreef (searchform-header php aanmaken, sociale media-codes erin en in header.php doorlinken, CSS code toevoegen) maar toen verschenen buttons rechtsboven logo en links van search form. Dus toen heb ik searchform-header php teruggedraaid, CSS laten staan en warempel: ineens waren buttons op de juiste plek!Dank je!

    Nog een klein dingetje: ik wil wel graag iets meer ruimte tussen de icoontjes, hoe pas ik dat aan?

    Ja dat kan door margin toe te voegen.

    .twitter-icon, .facebook-icon {
         float: right;
         margin: 7px;
    }

    En achter die margin kun je met de klok meegaan om richtingen aan te geven
    Dus:

    margin: 7px;  = marign top, right, bottom en left - 7px.
    margin 7px 5px 10px 8px; = 7px top, 5px right, 10px bottom en 8px left.

    Thread starter Ilovebooks

    (@ilovebooks)

    Gelukt. Heel erg bedankt voor je hulp Shmoo!

    Hallo,

    Ik heb min of meer dezelfde vraag bij dezelfde theme, maar het is mij nog niet helemaal duidelijk. Ik heb zelf icons gedownload, omdat ik deze mooier bij mijn site vind staan.
    Kunt u mijn stap voor stap uitleggen hoe ik deze boven in mijn header kan krijgen?
    Ik ben nog niet zo bekent met wordpress, en druf niet zomaar de codes te veranderen.

    marjanstokman.nl

15 reacties aan het bekijken - 1 tot 15 (van in totaal 16)
  • Het onderwerp ‘Social media buttons toevoegen header’ is gesloten voor nieuwe reacties.