zondag 31 maart 2013

Gecontroleerde en beperkte toegang voor gebruik plugin in Wordpress

Dit was een nieuwe avontuur voor me. Ik ben bezig met een nieuw concept voor dewebmeester.nl: een online website builder tool waarmee klanten zelf een mobiele website kunnen maken of onderhouden. Dat concept is al aardig uitgewerkt maar hoe geef ik klanten nu beperkte toegang tot het gebruik van deze Wordpress plugin?

Situatie:

  • Ik heb een Wordpress website met verschillende thema's, plugins, pagina's enzovoorts.

  • Nu wil ik 1 plugin beschikbaar stellen voor gebruik aan klanten van dewebmeester.nl

  • Wordpress biedt standaard eigenlijk maar twee mogelijkheden wat betreft gebruikers: 1) Een gebruiker is een administrator en heeft toegang tot alles of 2) een gebruiker is geen administrator en heeft al dan niet toegang tot de content (blog posts) van de website.

  • Kortom: Wordpress biedt standaard niet de mogelijkheid om een gebruiker beperkte toegang te geven tot back -end (dashboard). Je hebt of helemaal toegang, of helemaal niet.


Het heeft me wel enige uren geduurd voor ik de oplossing gevonden heb en hem verschillende plugins geprobeerd zoals: - s2members -, - members - en - user role editor - maar die bieden allemaal niet de mogelijkheid om administrators (degenen die toegang tot dashboard hebben) verschillende permissies te geven. De scheiding blijft: of wel, of geen toegang tot dashboard. Maar ik wil een gedeeltelijke toegang tot dashboard.

De oplossing:

Elke plugin definieerd voor zichzelf de toegangs permissies. En Wordpress plugins maken allemaal standaard gebruik van de Wordpress settings: alle administratoren hebben toegang tot alle plugins. Hier stappenplan om tot andere situatie te komen:

  1. Download de complete plugin folder naar de harde schijf

  2. Open deze plugin folder met het programma EditPadPro en zorg dat het programma alle files uit de subfolders opent (geweldig dat EditPadPro dit kan!)

  3. Zoek vervolgens naar alle verwijzingen naar - manage_options - binnen deze files en:

  4. Om Editors toegang tot de plugin te verlenen, verander  'manage_options' in 'edit_pages'.
    Om Authors toegang tot de plugin te verlenen, verander  'manage_options' in 'publish_posts'.
    Om Contributors toegang tot de plugin te verlenen, verander  'manage_options' in 'edit_posts'.
    Om Subscribers toegang tot de plugin te verlenen, verander  'manage_options' in 'read'.


Ik heb in de options.php file van de plugin - manage-options - verandert in - edit_pages - en elke gebruiker die Editor is krijgt vervolgens onderstaand dashboard te zien na inloggen:

mobilesitebuilder1

Netjes toch? De Editor heeft toegang gekregen tot de Mobile Site Builder van www.mobilesitebuilder.nl maar kan geen enkele post aanpassen die hijzelf niet eerst gemaakt heeft. Zelfs tools zijn niet beschikbaar (behalve Press This). De Editor kan de Mobiele Site Builder gebruiken, zijn eigen posts aanpassen en eventueel wat gegevens in zijn profiel aanpassen. Ik ben blij.

maandag 18 maart 2013

Foto album met preview afbeeldingen bij mouse on hover zoals op Facebook.....

Nou, deze blogpost lijkt mogelijk op Arabisch meer de functie is dat ik hier mijn gedachten en ideeen probeer weer te geven betreffende een opdracht in de hoop dat ik dit opdracht succesvol zal kunnen uitvoeren:

Opdracht: klant heeft Wordpress website en een leuke gallery via een gallery plugin. Nu is hij daar niet tevreden mee. Hij wil extra functionaliteit. De home pagina van de gallery toont een aantal categorieen. Die kunnen we beschouwen als fotoalbums over een bepaald onderwerp. Hij wil dat als de bezoeker met zijn muis over de voorkant van dit fotoalbum beweegt, dat dan automatisch, achter elkaar, een preview getoond wordt van de afbeeldingen binnen dat fotoalbum. Nee, niet onmogelijk. Maar wel moeilijk. Om het nog leuker te maken heeft hij een voorbeeld: de weergave van de fotoalbums in Facebook.

Spioneren van de code binnen Facebook
Dat doe ik meestal: even spieken binnen de code van de website waar de klant het voorbeeld gevonden heeft. Facebook in dit geval. Wat zie ik:
<div id="u_0_3b" class="_30l"><span id="u_0_2f" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 0;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/p206x206/530465_10151320424569284_27191678_n.jpg);"></i></span><span id="u_0_2g" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 0;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-d.ak.fbcdn.net/hphotos-ak-snc6/p206x206/603007_10151320424504284_10063898_n.jpg);"></i></span><span id="u_0_2h" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 0;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-f.ak.fbcdn.net/hphotos-ak-ash4/p206x206/318068_10151320424509284_1098475204_n.jpg);"></i></span><span id="u_0_2i" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 0;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/p206x206/582526_10151320424494284_1473985989_n.jpg);"></i></span><span id="u_0_2j" aria-label="Photo" class="uiMediaThumb _30m uiMediaThumbMedium" style="opacity: 1;"><i class="uiMediaThumbImg" style="background-image: url(http://sphotos-b.ak.fbcdn.net/hphotos-ak-prn1/p206x206/47666_10151320427084284_424829715_n.jpg);"></i></span></div>

Mooie code maar de vraag is nu waar die naartoe verwijzen. Oftewel: in welke file of binnen welk script staat bijvoorbeeld het volgende gedefinieerd?:
class="uiMediaThumb _30m uiMediaThumbMedium"

Nee, lijkt me op zich niet erg relevant. Dit is tenslotte verwijzing naar css code en betreft niet een script. Code geeft alleen de output weer van het script. Maar welk script genereert deze output? Maar even googlen op: "load preview images mouse on hover". Geen succes. Of: "how to have images load on mouse over in wordpress plugin". Veel informatie, nog geen antwoorden.

Mijn test op jsfiddle.com

Positioneren van elementen binnen webpagina

Dit is kort en basic: het positioneren van elementen binnen een webpagina is een steeds terugkerende bezigheid en iedereen met een website heeft hier mee te maken. Binnen dit blog is informatie te vinden over positioneren binnen Joomla via het plaatsen van een extra module positie of via het gebruik van een module suffix. Maar meest belangrijk is om eerst de basis wat betreft html op een rij te hebben.

Gisteren moest ik vanwege een opdracht via tweaky.com een bug oplossen binnen een menu. Een scrollend menu. Na klikken scrollt te pagina naar beneden. Maar dit werkte niet. Na herstel van de .js file was dit opgelost. Behalve voor 1 menu item. Want dit was gelinkt aan een externe url. Na klikken zou de bezoeker moeten worden doorverwezen naar een andere webpagina. Maar nee, dat bleek ineens niet meer te werken. Dat had ik nog niet eerder meegemaakt: bij "hover-over" met de muis werd de url zichtbaar (linksonder binnen de browser) maar als ik dan klikte, gebeurde er niets. Een conclict tussen het javascript en de css file. De oplossing leek om dit menu item uit het menu te tillen, en apart te plaatsen. Ja, nu werkte het. Het enige wat nu nog nodig was, was het postioneren van dit menu item zodat het opnieuw op exact dezelfde plaats zou verschijnen als eerder. En eerder maakte het deel uit van een lijst (<ul><li></li></ul>) en nu niet meer......

Oplossing
Volgens mij is stap 1 bij positionering eigenlijk altijd het plaatsen binnen een <div></div>. Een div met een identiteit: <div id="identiteit"> zodat het layout gedrag binnen deze div gedefinieerd kan worden binnen de css file.
Stap 2 zou volgens mij ook bijna altijd hier op moeten lijken: kijken via Firebug welke css stijlen er al gebruikt worden en kopieren. Maar dan wel als zijnde een eigen identiteit. Oftewel: in mijn geval werd <div id="navtop"> gebruikt voor het menu en de nieuwe div werd dus <div id="navtop2"> en vervolgens kopieer ik alle bijbehorende verwijzingen naar navtop binnen de css file en noem die navtop2. Er onstaat zo een blokje met een layout identiek aan de gebruikte die apart te postioneren is binnen de html.
Stap 3: trial and error. Gewoon de <div>menu item</div> verplaatsen binnen de html en kijken waar ik deze het beste kwijt kan. Dit is de groffe positionering. Nu ben ik in de buurt.
Stap 4: fijnstemmen. En dat kan bijvoorbeeld via:

position:"relative"; right="300px";

Vervolgens wordt het menu item 300 px ten opzichte van rechter grens van website getoond. Firebug helpt hier natuurlijk om live te kunnen zien welke getallen hier precies gebruikt moeten worden.

dinsdag 12 maart 2013

Test zenden foto's vanuit email naar Wordpress.com website

Vandaag probeer ik 4 foto's te plaatsen binnen de wordpress website onder www.dewebhulp.nl; Ik ben benieuwd.

Ashampoo Photo Mailer
Delen van foto's via e-mail eenvoudig gemaakt.
Vraag uw gratis 40-dagen probeerversie:
Hier klikken: https://www.ashampoo.com/photomailer
[gallery]