Elektroda.pl
Elektroda.pl
X
Elektroda.pl
Proszę, dodaj wyjątek dla www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

Logo elektrody wśród ikonek serwisów społecznościowych na stronie internetowej

r03c10 30 Kwi 2019 17:15 1431 4
  • Witam,

    dzisiaj chciałbym pokazać jak w prosty sposób dodać swoją ikonkę do gotowych zestawów ikonek portali społecznościowych. W poradniku posłużę się logiem elektrody, ale oczywiście każdy może przygotować swoje logo.

    Wstęp:
    Na pewno każdy z nas spotykał się z zestawem ikonek mediów społecznościowych występującymi na stronach internetowych. Najczęściej są to ikonki facebooka, twittera, youtube itd. Istnieją gotowe wtyczki na przykład do Wordpressa, które pozwalają nam w prosty sposób dodać taki gotowy zestaw na stronę. Sam korzystam z wtyczki Simple Social Icons, która jest chyba najpopularniejszym tego typu pluginem. Obsługa tej wtyczki jest bardzo wygodna, ale ma ona jedną wadę. Nie możemy w prosty sposób dodawać swoich ikonek i odnośników. Kończy się to tym, że tworzenie odnośników do najpopularniejszych portali jest banalnie proste, lecz co jeśli chcielibyśmy wkleić na naszą stronę ikonkę na przykład Elektrody i stworzyć odnośnik do naszego profilu? Wszak Elektroda to również w pewnym sensie portal społecznościowy :) Postaram się tutaj krótko opisać jak przygotować plik z logo i jak wrzucić go na naszą stronę.

    Przygotowanie pliku:
    Na początku musimy sobie przygotować logo. Ja w tym celu skorzystałem z programu Inkscape. Ważne jest żeby plik przygotowany był w formacie wektorowym, a konkretnie w formacie .svg, gdyż taki typ będzie akceptowany przez naszą wtyczkę na stronie. Bez zbędnego zagłębiania się w szczegóły, poniżej znajduje się przygotowane przeze mnie logo.

    Logo elektrody wśród ikonek serwisów społecznościowych na stronie internetowej


    Gdy mamy już przygotowany plik z naszą grafiką, czeka nas trudniejsze zadanie. Jako że wtyczka SSI akceptuje pliki .svg w bardzo okrojonym formacie, musimy wyciąć z naszego pliku tylko interesujące nas informacje o zapisanej krzywej. Na początek jednak przyjrzyjmy się przykładowemu plikowi .svg, który pobrałem z gotowego zestawu ikonek i otworzyłem go w zwykłym notatniku:

    Code:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path d="M0 0h7.2v2.1h-7.2zM23.9 11.4c-6.7 0-6.7 6.7-6.7 6.7s-.5 6.6 6.7 6.6c0 0 5.9.3 5.9-4.6h-3.1s.1 1.9-2.8 1.9c0 0-3.1.2-3.1-3h9c.2 0 1.1-7.6-5.9-7.6zm-3 5.2s.4-2.7 3.1-2.7 2.6 2.7 2.6 2.7h-5.7zM13.3 14.9s2.6-.2 2.6-3.3C15.9 8.5 13.8 7 11 7H2v17.4h9s5.5.2 5.5-5.1c.1-.1.3-4.4-3.2-4.4zM6 10.1h5s1.2 0 1.2 1.8-.7 2.1-1.5 2.1H6v-3.9zm4.8 11.2H6v-4.6h5s1.8 0 1.8 2.4c.1 2-1.3 2.2-2 2.2z"/>
    </svg>


    Widzimy, że w pliku znajduje się komenda path, którą musimy po prostu podmienić na wycięty z naszego przygotowanego pliku fragment. Krótko mówiąc rozkaz path interpretowany jest jako ścieżka rysowania kształtu. Po więcej szczegółów odsyłam do poradnika dotyczącego .svg, gdzie możemy w zasadzie nauczyć się tworzyć obrazy bez edytora graficznego, pisząc kod:

    http://svgpocketguide.com/book/

    Oprócz podmienienia linijki path, konieczne jest dodanie w nagłówku pliku parametru id="social-elektroda", który wykorzystamy za moment.

    W tym momencie mamy w zasadzie gotowy plik. Teraz pora wrzucić go na serwer i dodać trochę kodu w plikach naszego szablonu Wordpressa, żeby był on widoczny.

    Dodawanie pliku na serwer:
    Teraz pora na wrzucenie pliku na serwer. Zanim to zrobimy to dodajmy w pliku functions.php naszego szablonu WP następujący kod:

    Kod: php
    Zaloguj się, aby zobaczyć kod


    Doda on nam naszą ikonkę do listy wyboru w pluginie SSI. Teraz wyjaśnia się kwestia id="social-elektroda" w nagłówku pliku. Otóżskrypt będzie szukał tego ID wewnątrz pliku, a gdy go nie znajdzie to po prostu zignoruje plik, sama nazwa pliku nie wystarcza. Teraz pora na wrzucenie pliku na serwer. Funkcja get_stylesheet_directory_uri() zwraca nam katalog naszego szablonu na serwerze i dlatego tam musimy wrzucić nasz plik. Jak widać w kodzie, ja stworzyłem tam sobie dodatkowy katalog images, a mój plik nazwałem icon.svg.

    Zapisujemy zmiany w pliku functions.php i przechodzimy do zakładki widgetów w menu Wordpressa. Naszym oczom powinien ukazać się taki widok:

    Logo elektrody wśród ikonek serwisów społecznościowych na stronie internetowej


    Widać, że mamy już dostęp do naszej nowej ikonki. Zakładając, że wszystko zrobiliśmy poprawnie, na naszej stronie zobaczymy przygotowaną przez nas ikonkę z odnośnikiem do strony.

    Logo elektrody wśród ikonek serwisów społecznościowych na stronie internetowej


    Podsumowanie:
    Zdaję sobie sprawę z tego, że poradnik nie jest ściśle związany z elektroniką, ale chciałem pokazać szerszemu gronu osób w jak prosty sposób możemy dodawać swoje ikonki i odnośniki na strony internetowe. Nie ograniczajmy się jedynie do gotowych rozwiązań i starajmy się eksperymentować. Mam nadzieję, że ktoś skorzysta z mojego rozwiązania i w odnośnikach mediów społecznościowych zacznie pojawiać się również Elektroda :) Zachęcam do komentowania i zadawania pytań. Dodatkowo zamieszczam w załączniku mój plik z ikonką. Można sobie podejrzeć jak to dokładnie wygląda w środku pliku.
    Załączniki:

    Fajne! Ranking DIY
    Potrafisz napisać podobny artykuł? Wyślij do mnie a otrzymasz kartę SD 64GB.
  • #3
    r03c10
    Poziom 11  
    Wiem, że logo mi wyszło tak sobie. Wszystko przez to, że generowałem je z obrazu .png i mi zlało diodę. Nie mogłem nigdzie znaleźć pliku z logo w wysokiej rozdzielczości. Postaram się dopracować logo i wrzucić je w tym temacie.

    Dodano po 12 [godziny] 29 [minuty]:

    Ok, po drobnych poprawkach logo elektrody w .svg wygląda teraz tak. Nie jestem grafikiem, ale myślę że jest w miarę ok w tym momencie. Załączam także plik z poprawionym logotypem.

    Logo elektrody wśród ikonek serwisów społecznościowych na stronie internetowej


    Na stronie prezentuje się to w ten sposób:

    Logo elektrody wśród ikonek serwisów społecznościowych na stronie internetowej
    Załączniki:
  • #4
    LA72
    Poziom 40  
    W załączeniu szybka konwersja logo do dxf.
    Jakoś jeszcze pozostawia wiele do życzenia, lecz jest to już jakiś punkt wyjściowy.
    Logo elektrody wśród ikonek serwisów społecznościowych na stronie internetowej