Kategoria: Porady

W tym artykule umieszczam ciekawą ściągawkę, która przypadnie do gustu każdemu twórcy stron internetowych. A mianowicie paletę kolorów z kodami do użycia w HTMLu lub CSS. Jak wiadomo kolory są nieodzownym elementem stron www i definiuje się je wszędzie, od czcionek po tło witryny. Kolory te, można dobierać na różne sposoby. Jeśli chodzi o podstawowe kolory można skorzystać z predefinowanych nazw – np. red|blue|green... Natomiast jeśli potrzebujesz używać innych barw, najwygodniej będzie skorzystać z gotowej ściągawki. Poniżej udostępniam wzornik tych najbardziej popularnych barw. Wśród nich poza odcieniami podstawowych kolorów, znajduje się również wiele wariacji kolorów m.in szeroka gama odcieni szarości.

Poza wyglądem koloru, obok z prawej strony znajduje się zapis szesnastkowy (HEX) poprzedzony znakiem # (hash), oraz dla ułatwienia dalej podany jest również zapis w formacie RGB (Red-Green-Blue czerwony-zielony-niebieski). Który rodzaj zapisu użyjesz w swoim projekcie, zależy tylko od ciebie. W HTML czy CSS dozwolone jest definiowanie kolorów (czcionek, tła czy innych elementów), zarówno w zapisie HEX jak i RGB. Oczywiście są to dwa podstawowe sposoby używane przez webmasterów, bo innych systemów jest jeszcze więcej.

Na przykład jeśli chcesz, aby czcionka tekstu na stronie miała kolor czerwony możesz użyć takiego zapisu:

<font color="red">tekst</font>
<font color="#FF0000">tekst</font>
<font color="rgb(128, 128, 0)">tekst</font>

Każdy z trzech zapisów da ten sam efekt, zmieni napis „tekst” na kolor czerwony.

Paleta kolorów:

	#660033 | rgb(102, 0, 51)
	#990033 | rgb(153, 0, 51)
	#ff3366 | rgb(255, 51, 102)
	#cc0033 | rgb(204, 0, 51)
	#ff0033 | rgb(255, 0, 51)
	#ff9999 | rgb(255, 153, 153)
	#cc3366 | rgb(204, 51, 102)
	#ffccff | rgb(255, 204, 255)
	#cc3399 | rgb(204, 51, 153)
	#993366 | rgb(153, 51, 102)
	#cc3399 | rgb(204, 51, 153)
	#ff99cc | rgb(255, 153, 204)
	#ff66cc | rgb(255, 102, 204)
	#ff99ff | rgb(255, 153, 255)
	#ff6699 | rgb(255, 102, 153)
	#cc0066 | rgb(204, 0, 102)
	#ff0066 | rgb(255, 0, 102)
	#ff3399 | rgb(255, 51, 153)
	#ff0099 | rgb(255, 0, 153)
	#ff33cc | rgb(255, 51, 204)
	#ff00cc | rgb(255, 0, 204)
	#ff66ff | rgb(255, 102, 255)
	#ff33ff | rgb(255, 51, 255)
	#ff00ff | rgb(255, 0, 255)
	#cc0099 | rgb(204, 0, 153)
	#990066 | rgb(153, 0, 102)
	#cc66cc | rgb(204, 102, 204)
	#cc33cc | rgb(204, 51, 204)
	#cc99ff | rgb(204, 153, 255)
	#cc66ff | rgb(204, 102, 255)
	#cc33ff | rgb(204, 51, 255)
	#993399 | rgb(153, 51, 153)
	#cc00cc | rgb(204, 0, 204)
	#cc00ff | rgb(204, 0, 255)
	#9900cc | rgb(153, 0, 204)
	#990099 | rgb(153, 0, 153)
	#cc99cc | rgb(204, 153, 204)
	#996699 | rgb(153, 102, 153)
	#663366 | rgb(102, 51, 102)
	#660099 | rgb(102, 0, 153)
	#9933cc | rgb(153, 51, 204)
	#660066 | rgb(102, 0, 102)
	#9900ff | rgb(153, 0, 255)
	#9966cc | rgb(153, 102, 204)
	#330033 | rgb(51, 0, 51)
	#663399 | rgb(102, 51, 153)
	#6633cc | rgb(102, 51, 204)
	#6600cc | rgb(102, 0, 204)
	#9966ff | rgb(153, 102, 255)
	#330066 | rgb(51, 0, 102)
	#6600ff | rgb(102, 0, 255)
	#6633ff | rgb(102, 51, 255)
	#ccccff | rgb(204, 204, 255)
	#9999ff | rgb(153, 153, 255)
	#9999cc | rgb(153, 153, 204)
	#6666cc | rgb(102, 102, 204)
	#6666ff | rgb(102, 102, 255)
	#666699 | rgb(102, 102, 153)
	#333366 | rgb(51, 51, 102)
	#333399 | rgb(51, 51, 153)
	#330099 | rgb(51, 0, 153)
	#3300cc | rgb(51, 0, 204)
	#3300ff | rgb(51, 0, 255)
	#3333ff | rgb(51, 51, 255)
	#3333cc | rgb(51, 51, 204)
	#0066ff | rgb(0, 102, 255)
	#0033ff | rgb(0, 51, 255)
	#3366ff | rgb(51, 102, 255)
	#3366cc | rgb(51, 102, 204)
	#000066 | rgb(0, 0, 102)
	#000033 | rgb(0, 0, 51)
	#0000ff | rgb(0, 0, 255)
	#000099 | rgb(0, 0, 153)
	#0033cc | rgb(0, 51, 204)
	#0000cc | rgb(0, 0, 204)
	#336699 | rgb(51, 102, 153)
	#0066cc | rgb(0, 102, 204)
	#99ccff | rgb(153, 204, 255)
	#6699ff | rgb(102, 153, 255)
	#003366 | rgb(0, 51, 102)
	#6699cc | rgb(102, 153, 204)
	#006699 | rgb(0, 102, 153)
	#3399cc | rgb(51, 153, 204)
	#0099cc | rgb(0, 153, 204)
	#83b4d8 | rgb(131, 180, 216)
	#66ccff | rgb(102, 204, 255)
	#3399ff | rgb(51, 153, 255)
	#003399 | rgb(0, 51, 153)
	#0099ff | rgb(0, 153, 255)
	#33ccff | rgb(51, 204, 255)
	#00ccff | rgb(0, 204, 255)
	#e5f3ff | rgb(229, 243, 255)
	#99ffff | rgb(153, 255, 255)
	#66ffff | rgb(102, 255, 255)
	#33ffff | rgb(51, 255, 255)
	#00ffff | rgb(0, 255, 255)
	#00cccc | rgb(0, 204, 204)
	#009999 | rgb(0, 153, 153)
	#669999 | rgb(102, 153, 153)
	#99cccc | rgb(153, 204, 204)
	#ccffff | rgb(204, 255, 255)
	#33cccc | rgb(51, 204, 204)
	#66cccc | rgb(102, 204, 204)
	#339999 | rgb(51, 153, 153)
	#336666 | rgb(51, 102, 102)
	#006666 | rgb(0, 102, 102)
	#003333 | rgb(0, 51, 51)
	#00ffcc | rgb(0, 255, 204)
	#33ffcc | rgb(51, 255, 204)
	#33cc99 | rgb(51, 204, 153)
	#00cc99 | rgb(0, 204, 153)
	#66ffcc | rgb(102, 255, 204)
	#99ffcc | rgb(153, 255, 204)
	#00ff99 | rgb(0, 255, 153)
	#339966 | rgb(51, 153, 102)
	#006633 | rgb(0, 102, 51)
	#336633 | rgb(51, 102, 51)
	#669966 | rgb(102, 153, 102)
	#66cc66 | rgb(102, 204, 102)
	#99ff99 | rgb(153, 255, 153)
	#66ff66 | rgb(102, 255, 102)
	#339933 | rgb(51, 153, 51)
	#99cc99 | rgb(153, 204, 153)
	#66ff99 | rgb(102, 255, 153)
	#33ff99 | rgb(51, 255, 153)
	#33cc66 | rgb(51, 204, 102)
	#00cc66 | rgb(0, 204, 102)
	#66cc99 | rgb(102, 204, 153)
	#009966 | rgb(0, 153, 102)
	#009933 | rgb(0, 153, 51)
	#33ff66 | rgb(51, 255, 102)
	#00ff66 | rgb(0, 255, 102)
	#ccffcc | rgb(204, 255, 204)
	#ccff99 | rgb(204, 255, 153)
	#99ff66 | rgb(153, 255, 102)
	#00ff33 | rgb(0, 255, 51)
	#33ff33 | rgb(51, 255, 51)
	#00cc33 | rgb(0, 204, 51)
	#33cc33 | rgb(51, 204, 51)
	#66ff33 | rgb(102, 255, 51)
	#00ff00 | rgb(0, 255, 0)
	#66cc33 | rgb(102, 204, 51)
	#006600 | rgb(0, 102, 0)
	#003300 | rgb(0, 51, 0)
	#009900 | rgb(0, 153, 0)
	#33ff00 | rgb(51, 255, 0)
	#66ff00 | rgb(102, 255, 0)
	#99ff00 | rgb(153, 255, 0)
	#66cc00 | rgb(102, 204, 0)
	#00cc00 | rgb(0, 204, 0)
	#33cc00 | rgb(51, 204, 0)
	#339900 | rgb(51, 153, 0)
	#99cc66 | rgb(153, 204, 102)
	#669933 | rgb(102, 153, 51)
	#99cc33 | rgb(153, 204, 51)
	#336600 | rgb(51, 102, 0)
	#669900 | rgb(102, 153, 0)
	#99cc00 | rgb(153, 204, 0)
	#ccff66 | rgb(204, 255, 102)
	#ccff33 | rgb(204, 255, 51)
	#ccff00 | rgb(204, 255, 0)
	#999900 | rgb(153, 153, 0)
	#cccc00 | rgb(204, 204, 0)
	#cccc33 | rgb(204, 204, 51)
	#333300 | rgb(51, 51, 0)
	#666600 | rgb(102, 102, 0)
	#999933 | rgb(153, 153, 51)
	#cccc66 | rgb(204, 204, 102)
	#666633 | rgb(102, 102, 51)
	#999966 | rgb(153, 153, 102)
	#cccc99 | rgb(204, 204, 153)
	#ffffcc | rgb(255, 255, 204)
	#ffff99 | rgb(255, 255, 153)
	#ffff33 | rgb(255, 255, 51)
	#ffff00 | rgb(255, 255, 0)
	#ffcc00 | rgb(255, 204, 0)
	#ffcc66 | rgb(255, 204, 102)
	#ffcc33 | rgb(255, 204, 51)
	#cc9933 | rgb(204, 153, 51)
	#996600 | rgb(153, 102, 0)
	#cc9900 | rgb(204, 153, 0)
	#ff9900 | rgb(255, 153, 0)
	#cc6600 | rgb(204, 102, 0)
	#993300 | rgb(153, 51, 0)
	#cc6633 | rgb(204, 102, 51)
	#663300 | rgb(102, 51, 0)
	#ff9966 | rgb(255, 153, 102)
	#ff6633 | rgb(255, 102, 51)
	#ff9933 | rgb(255, 153, 51)
	#ff6600 | rgb(255, 102, 0)
	#cc3300 | rgb(204, 51, 0)
	#996633 | rgb(153, 102, 51)
	#330000 | rgb(51, 0, 0)
	#663333 | rgb(102, 51, 51)
	#996666 | rgb(153, 102, 102)
	#cc9999 | rgb(204, 153, 153)
	#993333 | rgb(153, 51, 51)
	#cc6666 | rgb(204, 102, 102)
	#ffcccc | rgb(255, 204, 204)
	#ff3333 | rgb(255, 51, 51)
	#cc3333 | rgb(204, 51, 51)
	#ff6666 | rgb(255, 102, 102)
	#660000 | rgb(102, 0, 0)
	#990000 | rgb(153, 0, 0)
	#cc0000 | rgb(204, 0, 0)
	#ff0000 | rgb(255, 0, 0)
	#ff3300 | rgb(255, 51, 0)
	#cc9966 | rgb(204, 153, 102)
	#ffcc99 | rgb(255, 204, 153)
	#ff0000 | rgb(255, 0, 0)
	#00ff00 | rgb(0, 255, 0)
	#0000ff | rgb(0, 0, 255)
	#ff00ff | rgb(255, 0, 255)
	#00ffff | rgb(0, 255, 255)
	#70db93 | rgb(112, 219, 147)
	#5c3317 | rgb(92, 51, 23)
	#9f5f9f | rgb(159, 95, 159)
	#b5a642 | rgb(181, 166, 66)
	#d9d919 | rgb(217, 217, 25)
	#a62a2a | rgb(166, 42, 42)
	#8c7853 | rgb(140, 120, 83)
	#a67d3d | rgb(166, 125, 61)
	#5f9f9f | rgb(95, 159, 159)
	#5c4033 | rgb(92, 64, 51)
	#2f4f2f | rgb(47, 79, 47)
	#4A766E | rgb(74, 118, 110)
	#4F4F2f | rgb(79, 79, 47)
	#9932CD | rgb(153, 50, 205)
	#871F78 | rgb(135, 31, 120)
	#6b238E | rgb(107, 35, 142)
	#2F4F4F | rgb(47, 79, 79)
	#97694F | rgb(151, 105, 79)
	#7093DB | rgb(112, 147, 219)
	#855E42 | rgb(133, 94, 66)
	#545454 | rgb(84, 84, 84)
	#856363 | rgb(133, 99, 99)
	#D19275 | rgb(209, 146, 117)
	#8E2323 | rgb(142, 35, 35)
	#F5CCB0 | rgb(245, 204, 176)
	#238E23 | rgb(35, 142, 35)
	#CD7F32 | rgb(205, 127, 50)
	#DBDB70 | rgb(219, 219, 112)
	#C0C0C0 | rgb(192, 192, 192)
	#527F76 | rgb(82, 127, 118)
	#93DB70 | rgb(147, 219, 112)
	#215E21 | rgb(33, 94, 33)
	#4E2F2F | rgb(78, 47, 47)
	#9F9F5F | rgb(78, 47, 47)
	#C0D9D9 | rgb(192, 217, 217)
	#A8A8A8 | rgb(168, 168, 168)
	#8F8FBD | rgb(143, 143, 189)
	#E9C2A6 | rgb(233, 194, 166)
	#32CD32 | rgb(50, 205, 50)
	#E47833 | rgb(228, 120, 51)
	#8E236B | rgb(142, 35, 107)
	#32CD99 | rgb(50, 205, 153)
	#3232CD | rgb(50, 50, 205)
	#6B8E23 | rgb(107, 142, 35)
	#EAEAAE | rgb(234, 234, 174)
	#9370DB | rgb(147, 112, 219)
	#DB7093 | rgb(219, 112, 147)
	#A68064 | rgb(166, 128, 100)
	#2F2F4F | rgb(47, 47, 79)
	#23238E | rgb(35, 35, 142)
	#4D4DFF | rgb(77, 77, 255)
	#FF6EC7 | rgb(255, 110, 199)
	#00009C | rgb(0, 0, 156)
	#EBC79E | rgb(235, 199, 158)
	#CFB53B | rgb(207, 181, 59)
	#FF7F00 | rgb(255, 127, 0)
	#FF2400 | rgb(255, 36, 0)
	#DB70DB | rgb(219, 112, 219)
	#8FBC8F | rgb(143, 188, 143)
	#BC8F8F | rgb(188, 143, 143)
	#EAADEA | rgb(234, 173, 234)
	#D9D9F3 | rgb(217, 217, 243)
	#5959AB | rgb(89, 89, 171)
	#4F2F4F | rgb(79, 47, 79)
	#6F4242 | rgb(111, 66, 66)
	#8C1717 | rgb(140, 23, 23)
	#6B4226 | rgb(107, 66, 38)
	#8E6B23 | rgb(142, 107, 35)
	#E6E8FA | rgb(230, 232, 250)
	#3299CC | rgb(50, 153, 204)
	#007FFF | rgb(0, 127, 255)
	#FF1CAE | rgb(255, 28, 174)
	#00FF7F | rgb(0, 255, 127)
	#236B8E | rgb(35, 107, 142)
	#38B0DE | rgb(56, 176, 222)
	#DB9370 | rgb(219, 147, 112)
	#D8BFD8 | rgb(216, 191, 216)
	#ADEAEA | rgb(173, 234, 234)
	#fbfbfb | rgb(251, 251, 251)
	#f9f9f9 | rgb(249, 249, 249)
	#f6f6f6 | rgb(246, 246, 246)
	#f3f3f3 | rgb(243, 243, 243)
	#f1f1f1 | rgb(241, 241, 241)
	#efefef | rgb(239, 239, 239
	#ececec | rgb(236, 236, 236)
	#e9e9e9 | rgb(233, 233, 233)
	#e6e6e6 | rgb(230, 230, 230)
	#e3e3e3 | rgb(227, 227, 227)
	#e0e0e0 | rgb(224, 224, 224)
	#dedede | rgb(222, 222, 222)
	#dcdcdc | rgb(220, 220, 220)
	#dadada | rgb(218, 218, 218)
	#d7d7d7 | rgb(215, 215, 215)
	#d5d5d5 | rgb(213, 213, 213)
	#d2d2d2 | rgb(210, 210, 210)
	#cfcfcf | rgb(207, 207, 207)
	#cdcdcd | rgb(205, 205, 205)
	#cbcbcb | rgb(203, 203, 203)
	#c7c7c7 | rgb(199, 199, 199)
	#c4c4c4 | rgb(196, 196, 196)
	#c2c2c2 | rgb(194, 194, 194)
	#c0c0c0 | rgb(192, 192, 192)
	#bdbdbd | rgb(189, 189, 189)
	#bbbbbb | rgb(187, 187, 187)
	#b8b8b8 | rgb(184, 184, 184)
	#b5b5b5 | rgb(181, 181, 181)
	#b2b2b2 | rgb(178, 178, 178)
	#afafaf | rgb(175, 175, 175)
	#adadad | rgb(173, 173, 173)
	#aaaaaa | rgb(170, 170, 170)
	#a7a7a7 | rgb(167, 167, 167)
	#a4a4a4 | rgb(164, 164, 164)
	#a1a1a1 | rgb(161, 161, 161)
	#9e9e9e | rgb(158, 158, 158)
	#9c9c9c | rgb(156, 156, 156)
	#999999 | rgb(153, 153, 153)
	#969696 | rgb(150, 150, 150)
	#939393 | rgb(147, 147, 147)
	#909090 | rgb(144, 144, 144)
	#8d8d8d | rgb(141, 141, 141)
	#8a8a8a | rgb(138, 138, 138)
	#878787 | rgb(135, 135, 135)
	#848484 | rgb(132, 132, 132)
	#818181 | rgb(129, 129, 129)
	#7e7e7e | rgb(126, 126, 126)
	#7c7c7c | rgb(124, 124, 124)
	#797979 | rgb(121, 121, 121)
	#757575 | rgb(117, 117, 117)
	#717171 | rgb(113, 113, 113)
	#6d6d6d | rgb(109, 109, 109)
	#696969 | rgb(105, 105, 105)
	#666666 | rgb(102, 102, 102)
	#626262 | rgb(98, 98, 98)
	#5f5f5f | rgb(95, 95, 95)
	#5a5a5a | rgb(90, 90, 90)
	#565656 | rgb(86, 86, 86)
	#535353 | rgb(83, 83, 83)
	#4f4f4f | rgb(79, 79, 79)
	#4c4c4c | rgb(76, 76, 76)
	#494949 | rgb(73, 73, 73)
	#464646 | rgb(70, 70, 70)
	#434343 | rgb(67, 67, 67)
	#414141 | rgb(65, 65, 65)
	#3f3f3f | rgb(63, 63, 63)
	#3d3d3d | rgb(61, 61, 61)
	#3a3a3a | rgb(58, 58, 58)
	#363636 | rgb(54, 54, 54)
	#323232 | rgb(50, 50, 50)
	#2e2e2e | rgb(46, 46, 46)
	#2a2a2a | rgb(42, 42, 42)
	#262626 | rgb(38, 38, 38)
	#1f1f1f | rgb(31, 31, 31)
	#191919 | rgb(25, 25, 25)
	#0e0e0e | rgb(14, 14, 14)
	#000000 | rgb(0, 0, 0)

Ilość kolorów w powyższej palecie – 369

Większość z nas zna i pewnie nawet korzystało z serwisów, które skracają adresy URL linków. Najbardziej znane skracacze linków to tiny.pl czy bit.ly. Zasada działania tego typu serwisów, polega na utworzeniu specjalnego linku w krótkiej domenie z krótkim adresem, z innego nawet bardzo długiego linku strony lub podstrony dowolnego serwisu internetowego.

Przykład. Link do tego artykułu jest dość długi:

https://rankhost.pl/wlasny-skrypt-do-skracania-linkow-na-przykladzie-yourls/

Natomiast po skróceniu, będzie miał taką postać:

https://tiny.pl/d98vn

Gołym okiem widać, że ten drugi adres jest dużo krótszy i ładniej wygląda dla oka. No i składa się w mniejszej ilości znaków, co jest przydatne w publikowaniu linków w serwisach społecznościowych typu X.com (dawniej Twitter), gdzie ilość znaków w postach jest limitowana.

Oczywiście tego typu gotowe rozwiązania, mają wiele wad. Główną jest to, że nie masz pełnej kontroli nad tymi skróconymi linkami. Zewnętrzny serwis może je kiedyś skasować lub po prostu zwinąć interes. Dlatego najlepszym rozwiązaniem jest stworzenie własnego serwisu, który będzie pełnił tę funkcję. Poza pełną kontrolną nad linkami ważne jest to, że możesz go utworzyć we własnej nazwie, czyli domenie internetowej. Może to być bardzo przydatne narzędzie dla osób zajmujących się afiliacją, gdyż linki partnerskie można umieszczać pod własnymi unikalnymi adresami.

Do stworzenia tego typu witryny, jako przykład posłuży nam skrypt do skracania linków o nazwie YOURLS. Skrypt jest udostępniony na licencji open source, więc jest zupełnie darmowy. Niestety hosting i domena internetowa, które są potrzebne do jego wykonania są już płatne, ale to też nie jest aż tak dużo. Koszt ok. 100-150 zł na rok za własny serwis do skracania adresów, to nie jest wygórowana cena. W artykule przedstawię dwie ścieżki do samodzielnego stworzenia tego typu serwisu.

Metoda prostsza – dla osób mniej technicznych

Jeśli nie czujesz się na siłach lub nie masz czasu na ręczną instalację skryptu, to najprościej jest znaleźć hosting, który oferuje gotowy autoinstalator z tym systemem. Oczywiście takich hostingów jest dużo, my np. polecamy Seohost.pl, który ma dogodne ceny serwerów jak i domen internetowych. Jak założyć tam konto, wykupić hosting i domenę internetową, następnie podpiąć ją do serwera i ustawić sobie SSL, opisałem tutaj krok po kroku.

Gdy już masz to wszystko, logujesz się na swój serwer hostingowy. Klikasz z lewego menu Polecane aplikacje -> WordPress w otwartej stronie klikasz w Katalog Aplikacji i na samym dole w kategorii Różne, znajduje się instalator skryptu YOURLS. Po jego kliknięciu dajesz + instaluj tę aplikację i otworzy się okienko instalacyjne skryptu, w którym należy wybrać na jakiej domenie ma być on zainstalowany oraz login i hasło administratora.

Ważne żebyś wybrał przedrostek https://, dzięki czemu serwis będzie działał z szyfrowaniem SSL (standard w tych czasach). Jeśli chodzi o ścieżkę, można zostawić jak jest lub wpisać dowolne, pamiętając żeby nie używać polskich znaków.

Login i hasło będą potrzebne do zarządzania i konfiguracją skryptu. Jak już masz wszystko wypełnione, na dole klikasz + Zainstaluj. Instalacja potrwa kilka sekund.

Metoda trudniejsza – dla osób technicznych

To jest po prostu metoda ręcznej instalacji skryptu, gdy Twój hosting nie posiada autoinstalatora tego systemu. Będzie ona trochę dłuższa czasowo, ale efekt końcowy będzie taki sam.

Na początek musisz ściągnąć najnowszą wersję skryptu ze strony twórców (na GitHubie) – https://github.com/YOURLS/YOURLS/releases

Po rozpakowaniu paczki instalacyjnej, wszystkie pliki należy wgrać przez FTP do katalogu public_html lub www na serwerze. Choć wcześniej należy pamiętać o utworzeniu bazy danych MySQL na hostingu, i wpisaniu danych dostępowych (nazwa bazy, użytkownik, hasło i host) w pliku:

user/config.php

Domyślnie w katalogu user znajduje się plik config-sample.php. Ale wystarczy go skopiować i usunąć z jego nazwy -sample. Poza danymi dostępowymi do MySQL, warto pamiętać, aby zdefiniować swoją domenę oraz dane logowania admina w linijkach:

define( 'YOURLS_SITE', 'https://twojadomena.pl' );

$yourls_user_passwords = [
'username' => 'password',

Gdy już wszystko zostało prawidłowo wykonane, uruchamiasz plik instalacyjny wpisując taką ścieżkę:

https://twojadomena.pl/admin/

Wyświetli się strona instalacyjna skryptu, na której klikasz Install YOURLS. Jeśli wszystko przebiegnie prawidłowo, wyświetli się taki komunikat:

Doinstalowanie polskiej wersji językowej

Niestety domyślnie skrypt jest w wersji angielskiej, ale zawsze można doinstalować polską wersję językową, która dostępna jest tutaj. Wystarczy ściągnąć paczkę językową, wypakować, a pliki pl_PL.mo i pl_PL.po skopiować na serwer do folderu user/languages. Następnie w pliku config.php (który już wcześniej edytowałeś) w poniżej linijce dodajesz pl_PL, tak aby system wiedział że domyślnie ma obsługiwać polską wersję językową:

define( 'YOURLS_LANG', 'pl_PL' );

Niestety nie wszystko może być przetłumaczone, gdyż tłumaczenie było robione do wersji 1.6, a teraz na chwilę pisania artykułu najnowsza wersja to 1.9.2. Aczkolwiek będzie ona działać, tylko może być niekompletna. Z czego zauważyłem panel admina jest praktycznie w całości po polsku, jedynie strona główna jest po angielsku. Nie będzie to problemem, bo linki wygodniej tworzyć w panelu.

Tak wygląda panel do skracania linków:

Można tutaj stworzyć skrócony adres URL, nawet z własną zdefiniowaną nazwą w skrócie (po ukośniku /). Dostępne są tu również wszystkie wygenerowane linki, którymi można dowolnie zarządzać – edytować, udostępniać, sprawdzać statystyki kliknięć lub je usunąć. Ciekawą pozycją jest sprawdzanie statystyk każdego linka:

Sprawdzisz tutaj statystyki ruchu z czytelnym wykresem, lokalizację ruchu (według kraju) oraz możliwość sprawdzenia jego źródła.

Koniec pracy. Gratulacje, masz swój własny prywatny serwis, do skracania linków dla swoich stron internetowych.

WordPress jest najczęściej używanym systemem CMS na świecie. Wiele stron i blogów oparte jest na tym skrypcie. Ogromna popularność niestety sprawia, że system ten jest jednocześnie narażony na różne próby włamania i złośliwe oprogramowanie.

Oczywiście najbardziej narażona strona w WordPressie, to podstrona logowania do panelu administracyjnego, której adres zna każdy użytkownik:

https://twojastrona.pl/wp-login.php

Niestety ten adres znają również hakerzy i boty, które codziennie próbują przełamywać loginy i hasła stron postawionych na tym skrypcie, często także metodami „brute force„. Nawet jeśli masz bardzo bezpieczne hasło, to tego typu zabiegi obciążają hosting, gdyż doprowadzają do wielokrotnego odpytywania bazy danych na serwerze. Oczywiście istnieją specjalne wtyczki bezpieczeństwa typu Shield Security, Wordfence Security czy Sucuri Security, które zabezpieczają przed tego typu aktywnościami. Ale jak wiadomo nigdy nie ma w 100% skutecznych zabezpieczeń, więc warto stosować dodatkowe, które zabezpieczą Twoją stronę przed włamaniami.

I właśnie takie dodatkowe zabezpieczenie strony logowania do WordPressa prezentuje w tym artykule.

Zabezpieczenie polega na nałożeniu dodatkowego loginu i hasła na stronę logowania wp-login.php. Te dodatkowe dane dostępowe zostaną zahaszowane w pliku htpasswd, który przechowuje nazwy użytkowników i hasła w celu autoryzacji serwera Apache na hostingu. Cały proces opisany jest w kilku krokach.

1. Utworzenie pliku .htpasswd

W tym pliku będą znajdować się Twoje dane dostępowe, które wcześniej musisz zdefiniować. Możesz go stworzyć w notatniku systemowym lub programie Notepad++. Przy zapisywaniu pliku trzeba wybrać Zapisz jako typ: Wszystkie pliki i w nazwie wpisać .htpasswd. Gdy masz już go stworzonego, musisz zdefiniować login i hasło, którymi chcesz zabezpieczyć panel, korzystając z poniższego generatora htpasswd:

https://hostingcanada.org/htpasswd-generator/

Wpisujesz w Username – login, w Password – hasło i klikasz przycisk Create .htpasswd file. Ważne! Login i hasło powinny być unikalne i inne niż te, które masz ustawione w panelu WordPressa. Wygeneruje się jedna linijka kodu z zakodowanym hasłem i będzie miała taką postać:

login:{SHA}[losowe znaki]

Tę linijkę wklejasz do wcześniej utworzonego pliku .htpasswd i zapisujesz.

2. Wgranie pliku .htpasswd na serwer

Teraz należy go wgrać na serwer, na którym zainstalowana jest Twoja instalacja strona internetowa. Z tym że najlepiej, gdy będzie się on znajdował w specjalnie przez Ciebie utworzonym katalogu (np. o nazwie htpasswd, choć może być ona zupełnie inna) o poziom wyżej niż katalog ze stroną. Najlepiej w katalogu głównym serwera, którego zawartość wyświetla się zaraz po zalogowaniu na FTP.

Do katalogu wgraj plik .htpasswd i w tym momencie połowa pracy wykonana.

3. Ustawienie hasła w pliku .htaccess

Teraz w pliku .htaccess (który znajduje się w katalogu głównym WordPress), należy ustawić zabezpieczenie. Dodajesz do niego poniższe linijki kodu:

  AuthName "Restricted Area"
  AuthType Basic
  AuthUserFile /usr/home/nazwa_serwera/htpasswd/.htpasswd
  <Files wp-login.php>
  require valid-user
  </Files>

Ścieżka AuthUserFile /usr/home/nazwa_serwera/htpasswd/.htpasswd wskazuje bezpośrednią lokalizacje pliku na serwerze. Oczywiście z zależności od tego, z jakiej firmy hostingowej korzystasz, może ona być inna. Poniżej porada jak to sprawdzić.

Jak sprawdzić pełną ścieżkę katalogu strony www na swoim serwerze hostingowym?

Utwórz w notatniku plik o nazwie info.php (koniecznie musi mieć rozszerzenie .php)
Następnie wklej do niego kod:
  <?php
  echo dirname( __FILE__ );
  ?>
Zapisz plik i wgraj go do folderu głównego swojej strony i uruchom, wpisując adres w przeglądarce:

twoja-strona.pl/info.php

Wyświetli się pełna ścieżka do katalogu w którym znajduje się plik info.php. Na tej podstawie ustalisz jaka powinna być dokładna ścieżka w wpisana w .htaccess, aby odnosiła się do katalogu i pliku .htpasswd, podobnie jak jest w przykładzie wyżej.

Gdy już dodałeś cały kod do pliku .htaccess, należy go wgrać na serwer zastępując istniejący.

4. Efekt

Od teraz, gdy będziesz chciał się zalogować do panelu administracyjnego WordPressa, wyskoczy dodatkowe okienko do zalogowania:

Wpisujesz w nim login i hasło, które wcześniej zdefiniowałeś w pliku .htpasswd. Po prawidłowym zalogowaniu tymi danymi, dopiero teraz otworzy się właściwe konto do logowania WP.

Jak widzisz dzięki temu sposobowi, uzyskujesz dodatkowe zabezpieczenie swojego CMS przed włamaniami. Dodatkowo jeśli jakieś szkodliwe boty, będą próbowały logować się do panelu, zatrzyma ich ta bariera. Dzięki czemu nie będzie obciążana bazy danych niepotrzebnymi zapytaniami.