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.
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:
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:
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:
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.
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.
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
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.
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:
<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
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:
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.
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
Fajne? Ranking DIY
